用canvas和JS共享一段制作scratch音乐的代码，JS部分删除的代码少于20行

效果如下

盖伦。使用jpeg文件交换格式存储的编码图像文件扩展名

刮刮乐。可交换的图像格式

HTML部分

尸体！[](img/Gai LUN . jpg)canvas id=' canvas ' width=' 400 ' height=' 300 '/canvas/body没什么特别注意的

添加了一些CSS样式的效果

CSS部分

style type=' text/CSS ' * { margin : 0；padd : 0；} img { width: 400pxheight: 300pxleft: 200px绝对位置：z指数：-1；} canvas { margin-left :200 px；}/样式注释

1.为了清除浏览器本身的效果，

* { margin : 0；padd : 0；}2.img需要在灰布下添加z-index

3.图片的绝对定位

Js部分

分析逻辑

1.按鼠标移动相应的区域并将其刮掉

2.鼠标被提起来改变鼠标的位置，而不会刮开它

javascript，javascript

脚本类型=' text/JavaScript ' var canvas=document . getelementbyid(' canvas ')；var context=canvas . getcontext(' 2d ')；//绘制掩码上下文. BeginPath()；context . fillstyle=' grey ' context . fill rect(0，0，400，300)；//按鼠标拖动画布。onmousedown=function () {canvas。onmousemove=function(){//获取鼠标坐标var x=event.clientXvar y=event.clientY//destination-out显示原始上下文中不在后面区域的部分。global composite operation=' destination-out '；context . BeginPath()；context.arc(x-200，y，30，0，Math。PI * 2)；context . fill()；} }//鼠标不刮画布。onmouseup=function () {canvas。onmousemove=function(){ } }/script需要注意的是

1.图片和画布向左移动200px，因此圆的起点坐标相对于采集位置减少200px；

2.globalCompositeOperation是canvas的一个功能，是设置或返回如何将源(新)图像绘制到目标(已有)图像上，还有其他10种书写方式

以上20行JS代码达到了刮网页的效果，这是边肖分享的全部内容。希望能给大家一个参考，支持我们。