Skip to content
目录

canvas 的小 demo

1. 音频可视化

2. 小球的自由落体运动

当前浏览器不支持canvas元素,请升级或更换浏览器!

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:可选参数,在源图像数据中,矩形区域的高度。默认是图像数据的高度。

5. 签名