微客导航 » 文章资讯 » 原生JavaScript实现刮刮乐

原生JavaScript实现刮刮乐

2023-07-14 11:54:03 153

本文实例为大家分享了JavaScript实现刮刮乐的具体代码，供大家参考，具体内容如下

原理

鼠标按住移动的时候，实现刮刮乐的效果，那就是鼠标按下的同时鼠标移动，那就清除画布。松开鼠标，鼠标移动不再清除画布了，那就得清除事件。

canvas画布

1、获取画布元素

varcanvas=document.getElementById('canvas');

2、获取绘图对象getContext

varctx=canvas.getContext('2d');

3、画线

ctx.lineWidth=3;//线宽
ctx.strokeStyle='red';//线条颜色
//开始的位置moveTo(x,y);
//结束的位置lineTo(x,y)
//执行stroke()

4、矩形ctx.rect(x,y,width,height);

ctx.rect(0,0,300,150);
ctx.fillStyle='#ccc';//填充的颜色
ctx.fill();//执行
ctx.clearRect(e.clientX,e.clientY,20,20);//清除矩形

页面

1、页面结构


谢谢惠顾

2、样式

.prize{
width:300px;
height:150px;
text-align:center;
line-height:150px;
margin-top:-150px;
color:red;
font-size:20px;
}

3、动画

//获取画布元素
varcanvas=document.getElementById('canvas');
//获取绘图对象
varctx=canvas.getContext('2d');
ctx.lineWidth=3;//线宽
ctx.strokeStyle='red';//线条颜色
//开始的位置moveTo(x,y);
//结束的位置lineTo(x,y)
//执行stroke()

//矩形
ctx.rect(0,0,300,150);
ctx.fillStyle='#ccc';//填充的颜色
ctx.fill();//执行
ctx.clearRect(e.clientX,e.clientY,20,20);
//按下
canvas.onmousedown=function(e){
//移动
canvas.onmousemove=function(e){
//ctx.lineTo(e.clientX,e.clientY);
//ctx.lineTo(100,100)
//ctx.stroke();
ctx.clearRect(e.clientX,e.clientY,20,20);//清除
}
}
canvas.onmouseup=function(e){
canvas.onmousemove=null;
}
//改变中奖信息
vararr=['一个亿','现金500','100元话费','腾讯视频VIP月卡','谢谢惠顾'],
prize=document.querySelector('.prize'),
random=Math.floor(Math.random()*arr.length);
prize.innerText=arr[random];

完整源码





Title





谢谢惠顾

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

原生JavaScript实现刮刮乐

热门推荐

随机推荐