canvas入门--绘制刮刮卡

1、html代码

 <div class="jpk" id="jpk"><div class="jp" id="jp">谢谢惠顾</div><canvas id="canvasFirst" width="600" height="200"></canvas></div>

2、css样式

.jpk {height: 200px;width: 600px;position: relative;border: 1px solid darkgray;.jp {height: 200px;width: 600px;position: absolute;top: 0;left: 0;font-size: 40px;color: deeppink;line-height: 200px;text-align: center;user-select: none;}#canvasFirst {position: absolute;top: 0;left: 0;}
}

3、JavaScript代码

    // 1、找到画布对象var canvasFirst = document.getElementById("canvasFirst");var jpk = document.getElementById("jpk");var jp = document.getElementById("jp");// 2、上下文对象（画笔）var ctx = canvasFirst.getContext("2d");ctx.fillStyle = "darkgray";ctx.fillRect(0, 0, 600, 200);ctx.font = "20px 微软雅黑";ctx.fillStyle = "#fff";ctx.fillText("刮刮卡", 260, 100);var isClick = false;canvasFirst.onmousedown = function () {isClick = true;};canvasFirst.onmousemove = function (e) {if (isClick) {var x = e.pageX - jpk.offsetLeft;var y = e.pageY - jpk.offsetTop;ctx.globalCompositeOperation = "destination-out";//隐藏原图层，显示目标图层ctx.arc(x, y, 20, 0, 2 * Math.PI);ctx.fill();}};canvasFirst.onmouseup = function () {isClick = false;};var jpList = [{content: "一等奖:iphone13 1TB",gl: 0.1,},{content: "二等奖:iphoneX",gl: 0.2,},{content: "三等奖:iPad",gl: 0.3,},];//随机奖品var randomNum = Math.random();if (randomNum < jpList[0].gl) {jp.innerHTML = jpList[0].content;} else if (randomNum < jpList[0].gl + jpList[1].gl) {jp.innerHTML = jpList[1].content;} else if (randomNum < jpList[0].gl + jpList[1].gl + jpList[2].gl) {jp.innerHTML = jpList[2].content;}

4、效果

canvas入门--绘制刮刮卡相关推荐

canvas绘制刮刮卡，超过一定面积显示全图
说明:栗子转自简书,在他的基础上添加了重置和超过一定面积显示全图,仅做学习使用.(推荐7.2的代码) 1.前端时间做的一个项目需要支持多终端,网页版需要使用html5中canvas画布对象对一组数据进 ...
canvas 绘制刮刮卡
思路=> 用div来展示刮奖结果,用canvas绘制刮奖前展示的图片或者文字:将canvas叠在div上方,刮奖是只需要操作canvas配合touch事件即可简单完成. canvas刮奖可以用g ...
canvas实践——绘制刮刮卡
canvas实践--绘制刮刮卡刮刮卡是一种常见的效果,如下图所示: 上述效果可以通过canvas中图像合成来实现,具体思路和代码如下: 1.利用css将刮刮卡的结果与canvas灰色涂层重叠: ht ...
Canvas基础入门 - 二时钟与刮刮卡
文章目录前言一.时钟绘制思路及代码实现 1.代码 2.注意事项二.刮刮卡绘制思路及代码实现 2.代码实现前言提示:以下是本篇文章正文内容,下面案例可供参考一.时钟绘制思路及代码实现思路与 ...
canvas绘制刮刮卡
无图不欢,先上图 <!DOCTYPE html> <html> <head><meta name="keywords" content=& ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
用canvas实现刮刮卡特效
canvas(画布)应用十分广泛,不仅可用来画图,配合ECharts做表格,还能做游戏．不过这次分享一下用canvas实现刮刮卡特效的一个应用．如果还不是很了解canvas基本知识,可以读一下我的相 ...
canvas刮刮卡游戏开发
canvas刮刮卡游戏开发先看效果: 一.基础知识-画布元素的使用 1 绘制线条思路在页面中添加画布元素获取画布元素的上下文环境对象使用上下文环境对象绘制图形,保存在内存中绘制一个线条 / ...
canvas实现刮刮卡
<canvas id="canvas" width="400" height="100"></canvas> < ...

canvas入门--绘制刮刮卡

canvas入门--绘制刮刮卡相关推荐

最新文章

热门文章