石头海外官网产品详情页Demo仿写笔记

石头官网产品demo仿写笔记

来源：要仿写的网站

效果： 鼠标移动，背景变化

基本思路：用两个图片叠加起来，鼠标移动canvas后，根据鼠标画一个圆形，这个圆形是透明的，可以看到后面的图片，

• 两个图片资源：

  hover；背景

一. 先两个图片叠加起来

思路：用一个盒子做背景，然后用Canvas的drawImage函数去加载另一张图片；

知识点：drawImage 在canvas中载入图片

代码链接：canvas背景叠底 (codepen.io)

这样显示出来，那个带透视图的没有显示，是因为Canvas的图片在下面,

二. 以鼠标指针为圆点画一个圆

思路：追踪mousemove事件，然后判断鼠标距离边界的距离算出x,y值，然后画一个圆，记得清除屏幕，不然会有拖影。

知识点：mousemove; clientX, clientY, arc(), clearRect

代码链接：以鼠标指针为圆点画一个圆 (codepen.io)

三. 把第一步和第二步结合起来，并且让圆变透明

思路：结合第一步和第二步，

问题：要把渲染图片的方式从drawImage改为createPattern() 才可以。

代码链接：两个背景，根据鼠标位置透明生成圆形 (codepen.io)

知识点：1. 装载图片，是有先后顺序的，后面加的图片就是会叠在前一个图片的上面，所以这里的背景被覆盖了，2. 为什么不能用drawImage绘图，因为drawImage不能和arc配合，可以尝试注释代码后看看，

四. （尝试失败）让圆形变得模糊，是一种若隐若现的感觉

思路：1. 使用shadowBlur，shadowColor创建一个发散的圆形阴影。 2. 把这个圆形使用globalCompositeOperation = \'destination-out’，来合成

问题：destination-out 一设置就是看不到图形了，不知道啥原因。和mdn的例子不一样。

代码链接：把圆形阴影变透明 (codepen.io)

五. 偷看代码，竟然使用WebGl做的。

webGl没有接触过，到这里就结束了。等我学习WebGl在补上学习笔记。