cari

Rumah  >  Artikel  >  hujung hadapan web  >  使用js代码制作网页刮刮乐

使用js代码制作网页刮刮乐

PHP中文网
PHP中文网asal
2017-06-22 14:37:044611semak imbas

分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码

效果如下

盖伦.jpg


刮刮乐.gif

HTML部分
<body> <img src="img/gailun.jpg"/> <canvas id="canvas" width="400" height="300"></canvas> </body>

没什么要特别注意的。为了效果加了些CSS样式

CSS部分
<style type="text/css">*{margin: 0;padding: 0;
        }img{width: 400px;height: 300px;left: 200px;position: absolute;z-index: -1;
            }canvas{margin-left:200px;
            }</style>
注意

1.为了清除浏览器自带效果加了

*{margin: 0;padding: 0;
        }

2.img需要在灰布下面,加了z-index;
3.图片绝对定位

js部分
分析下逻辑

1.鼠标按下移动相应区域刮开
2.鼠标抬起改变鼠标位置不接着刮开

js代码
    <script type="text/javascript">var canvas = document.getElementById("canvas");var  context =  canvas.getContext(&#39;2d&#39;);//画蒙布
        context.beginPath();
        context.fillStyle= &#39;grey&#39;
        context.fillRect(0,0,400,300);//鼠标按下开刮
        canvas.onmousedown=function(){
            canvas.onmousemove = function(){//获取鼠标坐标var x = event.clientX;var y  = event.clientY;//destination-out             显示原来的不在后来区域的部分
                context.globalCompositeOperation = "destination-out";
                context.beginPath();
                context.arc(x-200,y,30,0,Math.PI*2);
                context.fill();        
            }
        }//鼠标抬起不刮开
        canvas.onmouseup=function(){
            canvas.onmousemove = function(){    
            }
        }    </script>

需要注意的是

1.图片和画布左移了200px,所以圆的起点坐标相对于获取位置减了200px;
2.globalCompositeOperation是画布的一个功能作用是设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上,还有其余10种写法

Atas ialah kandungan terperinci 使用js代码制作网页刮刮乐. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：怎么利用nodejs搭建一个简单的服务器Artikel seterusnya：Angularjs在360兼容模式下取数据缓存问题解决办法

Artikel berkaitan

Lihat lagi