Stone官网产品演示仿笔记来源：拟仿网站效果：鼠标移动，背景变化基本思路：用两张图片叠加，鼠标移动画布后，根据鼠标画一个圆圈，这个圆圈是透明的，可以看到后面的图片，两个图片资源：hover；背景1.首先，两张图片叠加。思路：使用一个盒子作为背景，然后使用Canvas的drawImage函数来加载另一张图片；知识点：drawImageloadpictureincanvas代码链接：Canvas背景叠加（codepen.io）是这样显示的，有透视的不显示，因为下面是Canvas的图片，二。用鼠标指针画一个圆圈作为一个点。思路：跟踪mousemove事件，然后判断鼠标到边界的距离，计算出x，y值，然后画一个圆。记得清屏，不然会有拖影。知识点：mousemove；clientX,clientY,arc(),clearRect代码链接：用鼠标指针画一个圆圈（codepen.io）3.结合第一步和第二步，使圆透明：结合第一步和第二步，问题：渲染图片的方法必须从drawImage改成createPattern()。代码链接：两个背景，根据鼠标位置透明生成一个圆（codepen.io）知识点：1.加载图片有顺序，后面添加的图片会叠加在前面的图片上面，所以这里背景被覆盖。2.为什么不能用drawImage来画图，因为drawImage不能和arc配合，大家可以试试注释代码看看，4.（尝试失败）让圆变模糊是一种模糊的感觉.想法：1。使用shadowBlur、shadowColor创建发散的圆形阴影。2、用这个圆加上globalCompositeOperation='destination-out'综合问题：一旦设置了destination-out，就看不到图形，不知道为什么。与mdn的例子不一样。代码链接：使圆形阴影透明（codepen.io）5.偷看代码，其实是用WebGl做的。webGl我没接触过，就到这里了。当我学习WebGl的时候，我会把学习笔记补上。
