JavaScript canvas实现刮刮乐案例
程序员文章站
2022-06-25 22:16:08
本文实例为大家分享了javascript canvas实现刮刮乐效果的具体代码,供大家参考,具体内容如下效果图html代码:
本文实例为大家分享了javascript canvas实现刮刮乐效果的具体代码,供大家参考,具体内容如下
效果图
html代码:
<div class="ggk"> <span id="span">200元</span> <canvas id="canvas"></canvas> </div>
css代码:
.ggk { width: 200px; height: 100px; border: 1px solid #000; margin: 20px auto; color: red; position: relative; } .ggk span { position: absolute; width: 100%; height: 100%; text-align: center; font-size: 50px; line-height: 100px; } #canvas { position: absolute; left: 0; top: 0; }
js代码:
var canvas = document.getelementbyid("canvas") init() function init() { canvas.width = 200; canvas.height = 100; var ctx = canvas.getcontext("2d") // 覆盖一层灰色 ctx.save(); ctx.fillstyle = 'rgb(100,100,100)' ctx.fillrect(0, 0, 200, 100) draw(ctx) pro() } // 随机内容 function pro() { var span = document.getelementbyid("span") var arr = ["100元", '谢谢惠顾', '200元', '谢谢惠顾', '谢谢惠顾', '谢谢惠顾', '500万', '谢谢惠顾'] var num = math.floor(math.random() * (arr.length - 1)) var text = arr[num] span.innerhtml = text } function draw(ctx){ // 点下事件 canvas.onmousedown = function(e){ // 移动事件 var downx= e.offsetx var downy= e.offsety ctx.beginpath() // ctx.globalcompositeoperation = 'destination-out' ctx.linewidth = 10; ctx.moveto(downx,downy) canvas.onmousemove = function(e){ var x = e.offsetx var y = e.offsety // ctx.lineto(x,y) ctx.clearrect(x,y,20,20) ctx.stroke() } } // 鼠标弹起事件 canvas.onmouseup = function(){ canvas.onmousemove = null } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。