canvas教程

Canvas 学习笔记1

字号+ 作者:H5之家 来源:H5之家 2015-09-08 17:08 我要评论( )

Canvas 学习笔记1 #Canvas 学习笔记1@[Canvas,Nunn,HTML5,javascript]##前言相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人看了之后,其实发现作用非常小,因为似乎这些东西什么也做不了,本着学习提升自己,

Canvas 学习笔记1

#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言 相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人看了之后,其实发现作用非常小,因为似乎这些东西什么也做不了,本着学习提升自己,造福大家,我打算把我学习`Canvas`的历程记录在这里。 首先推荐大家先看看阮一峰大大写的这个[Canvas API](),我感觉挺不错的,对于想了解`Canvas`的人来说,这些已经足够了。深入的学习,咱慢慢再来。 ###坑爹集锦 这里汇集了一些我所碰到的问题或者自己的理解,标题纯粹的只是为了吐槽,有说的不对的地方,望各位见谅,并予以修正。 1. 关于之前发的链接`Canvas API`的`3.1`部分 ```javascript var image = new Image(); image.onload = function() { if (image.width != canvas.width) canvas.width = image.width; if (image.height != canvas.height) canvas.height = image.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(image, 0, 0); } image.src = "image.png"; ``` 这部分,这里的`canvas`指的是画布大小*`用小写的canvas表示画布`*,并不是`Canvas`这个`DOM`对象的大小*`用大写的表示DOM对象`*。这里关系到3个概念。 - `DOM`元素`Canvas`的大小 - `canvas`画布大小 - `image`图片大小 那再来理解下第四行`canvas.width = image.width;`这里是让画布的高度等于图片的高度,实际上`DOM`元素`Canvas`的大小是不发生任何改变的,改变的只是画布的大小。 今天新买的书到了《HTML Canvas核心技术》,网上一致好评的书。里面`1.1.1`就有提到了,画布大小还有元素大小。 >使用CSS来设置canvas元素的大小,与直接设置属性相比,其差别是基于这样一个事实的:canvas元素实际上有两套尺寸。一个是元素本身的大小,还有一个是元素绘图表面(drawing surface)的大小。 >**警告:浏览器可能会自动缩放Canvas** 通过width与height属性而非修改CSS来修改canvas元素的大小,这是个好办法。如果使用CSS来修改元素的大小,同时有没有制定canvas元素的width与height属性,那么,当元素大小与canvas的绘图表面大小不相符时,浏览器会缩放后者,使之符合前者的大小。这样的话,很可能会导致奇怪的、无用的效果。 ``` ---------- 基友说 逢 站 坑 撸 必 不 过 哭 ---------- 2014年7月17日 17:03:00 ```

posted @

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

网友点评