canvas实现刮刮卡

<canvas id="canvas" width="400" height="100"></canvas>
<div class="text">恭喜您获得100w</div>

style:

* {margin: 0;padding: 0;}.text {position: absolute;left: 130px;top: 35px;z-index: -1;}

js:

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')// 填充的颜色
ctx.fillStyle = 'darkgray'
// 填充矩形 fillRect(起始X,起始Y,终点X,终点Y)
ctx.fillRect(0, 0, 400, 100)
ctx.fillStyle = '#fff'
// 绘制填充文字
ctx.fillText('刮刮卡', 180, 50)let isDraw = false
canvas.onmousedown = function () {isDraw = true
}
canvas.onmousemove = function (e) {if (!isDraw) return// 计算鼠标在canvas里的位置const x = e.pageX - canvas.offsetLeftconst y = e.pageY - canvas.offsetTop// 设置globalCompositeOperationctx.globalCompositeOperation = 'destination-out'// 画圆ctx.arc(x, y, 10, 0, 2 * Math.PI)// 填充圆形ctx.fill()
}
canvas.onmouseup = function () {isDraw = false
}

效果图：

canvas实现刮刮卡相关推荐

刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
canvas绘制刮刮卡，超过一定面积显示全图
说明:栗子转自简书,在他的基础上添加了重置和超过一定面积显示全图,仅做学习使用.(推荐7.2的代码) 1.前端时间做的一个项目需要支持多终端,网页版需要使用html5中canvas画布对象对一组数据进 ...
用canvas实现刮刮卡特效
canvas(画布)应用十分广泛,不仅可用来画图,配合ECharts做表格,还能做游戏．不过这次分享一下用canvas实现刮刮卡特效的一个应用．如果还不是很了解canvas基本知识,可以读一下我的相 ...
canvas刮刮卡游戏开发
canvas刮刮卡游戏开发先看效果: 一.基础知识-画布元素的使用 1 绘制线条思路在页面中添加画布元素获取画布元素的上下文环境对象使用上下文环境对象绘制图形,保存在内存中绘制一个线条 / ...
canvas绘制刮刮卡
无图不欢,先上图 <!DOCTYPE html> <html> <head><meta name="keywords" content=& ...
canvas实现刮刮卡，vue3实现
效果图: 主要属性:globalCompositeOperation 代码: <template><div class="guaguaka" id="g ...
用Canvas实现刮刮卡功能的研究与实践
前几天,单位老刘让我研究一下网上最近很流行的"刮刮卡"是怎么实现的,我第一时间就想起了我媳妇曾经跟我说过的:"在HTML5中Canvas的绘图能力很强大" ...
HTML用画布实现刮刮卡,利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
H5 canvas制作刮刮卡效果并计算清理结果
简要步骤如下 1.绘制底图载体任意DOM CANVAS 图片皆可 2.canvas绘制交互区域纯色或图片皆可 3.设定混合模式 "destination-out" 关键 4.根 ...

canvas实现刮刮卡

style:

js:

canvas实现刮刮卡相关推荐

最新文章

热门文章