今天开始学习html5,学习完后做个笔记,以便考察遗忘度。
首先学习了canvas的getImageData和putImageData,通过这2个方法可以获取和设置canvas上面对象的像素颜色。
getImageData返回的对象属性data包含了像素颜色值,一个像素点有4组颜色值组成(r,g,b,alpha),所以遍历像素的时候需要+4。像素的个数可以通过data.length获得。
另外接触到了Image对象,在canvas中插入图像的方法如下:
View Code
1 var image = new Image();2 image.src = "bayern.jpg";3 image.onload = function () {4 context.drawImage(image, 0, 0);5 };
这里要注意image.onload这个方法,如果直接drawImage是无法显示图片的。必须要等图片加载到内存中后方可drawImage,这个时间很短,具体和图片的大小有关。所以通过setTimeout也是可以加载图片的。