canvas 的小 demo
1. 音频可视化
2. 小球的自由落体运动
3. 烟花
4. 主题色改变(图片加上滤镜)和拾色器
划过的颜色为:
选中的颜色:
getImageData()
getImageData()
方法可以返回一个ImageData
对象。
ImageData
对象用来描述canvas
区域隐含的像素数据,此区域通过矩形表示,起始点为(sx, sy)、宽为 sw、高为 sh
语法:getImageData(sx, sy, sw, sh)
参数:x
sx:将要被提取的图像数据矩形区域的左上角 x 坐标
;
sy:将要被提取的图像数据矩形区域的左上角 y 坐标
;
sw:将要被提取的图像数据矩形区域的宽度
;
sh:将要被提取的图像数据矩形区域的高度
;
🎉 :getImageData(x,y,1,1)
:获取距离 x 和 y 位置的 1 像素点的颜色
putImageData()
putImageData()
:可以将数据从已有的ImageData
对象绘制为位图
语法: putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
参数:
ImageData:包含像素值的数组对象
。 dx:源图像数据在目标画布中 x 轴方向的偏移量
。 dy:源图像数据在目标画布中 y 轴方向的偏移量
。 dirtyX:可选参数,在源图像数据中,矩形区域左上角的位置。默认是整个图像数据的左上角(x 坐标)。 dirtyY:可选参数,在源图像数据中,矩形区域左上角的位置。默认是整个图像数据的左上角(y 坐标)。 dirtyWidth:可选参数,在源图像数据中,矩形区域的宽度。默认是图像数据的宽度。 dirtyHeight:可选参数,在源图像数据中,矩形区域的高度。默认是图像数据的高度。