至于ctx(画布渲染上下文),可以理解为画布上的画笔,我们可以通过画笔在画布上随心所欲的绘制图案。如果浏览器不支持canvas会直接显示canvas标签中间的文字。...,y坐标
* dWidth,dHeight 在画布上绘制的宽高 可选
*/
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth..., dHeight);
引用MDN上的一张图会比较清晰的看出每个参数的作用:
drawImage就是把一个image对象或者canvas上(甚至是video对象上的的每一帧)指定位置和尺寸的图像绘制到当前的画布上...那么,怎么做这个轮廓图呢,我们先读取每个像素的信息(用到上面的计算公式),如果这个像素的色值符合要求,就保存起来,用于重绘在画布上。...另外,既然是做成粒子的效果,我们只需要把像素粒子保存一部分,展示在画布上。