一.刮刮乐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通过蒙板实现刮刮乐</title><style>div{border: 1px solid #000;width: 250px;height: 60px;font-size: 40px;line-height: 60px;text-align: center;position: relative;user-select: none;  /* 文字不能被选中 */}canvas{position: absolute;left: 0;top: 0;}</style>
</head>
<body><div>特等奖<canvas width="250" height="60"></canvas></div>
</body>
</html>
<script>var canvas = document.querySelector("canvas");var ctx = canvas.getContext("2d");//画一个矩形ctx.fillStyle = "#333";ctx.fillRect(0,0,250,60);//设置新画上的元素，实际上就是擦除之前的元素ctx.globalCompositeOperation = "destination-out";//鼠标按下canvas.onmousedown = function(){console.log("按下了");console.log(event.offsetX,event.offsetY);//按下之后,再拖动canvas.onmousemove = function(event){//画圆ctx.beginPath();ctx.arc(event.offsetX,event.offsetY,10,0,7,false);ctx.fill();}}
</script>

二.效果图

刮开前：

刮开后：

篇章

上一篇：canvas教程17-合成

下一篇：PHP教程1-服务器

canvas教程18-刮刮乐相关推荐

安卓开发之刮刮乐实例教程
刮奖在生活中常常见到,网上现在也有各种各样的抽奖活动,下面我们就要实现一个刮刮乐程序,可以完美满足大家的虚荣心,哈哈,下面就开始吧,100%中奖的喔! 下面先来看看效果图: 让我们来看看它的布局: ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
H5 Canvas刮刮乐
玩游戏的人很多时候都会遇到翻牌子开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了其实很多时候在你点开那个 ...
canvas 实现刮刮乐
在解决问题前,我们先来了解一下 canvas 标签 canvas 是 html5 出现的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js 能够调用它来进行绘图 ...
html5 刮刮乐源码,HTML5 canvas实现刮刮乐功能
最近比较闲,除了在群里给大家交流交流,就没啥学习重心.看了论坛里的各种帖子,各种问题满天飞,这里我就整理了2个h5 canvas的demo,分享给大家! 使用html5的canvas实现刮刮乐功能舍 ...
canvas之刮刮乐
canvas之刮刮乐 canvas合成说到刮刮乐,先让我们了解一下canvas合成. 透明度合成 globalAlpha globalAlpha 就是全局对象的透明度,全局对象就是canvas 的上 ...
使用Canvas制作刮刮乐，看看你能刮出什么奖品来？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言今天在一个彩票网站看到了一个刮刮乐的效果,觉得挺有意思的就打算来仿写一个,经过一番简单的思考大概就有了基本都想法.总体效果使用Can ...
canvas实现简单的刮刮乐功能
canvas实现刮刮乐效果平时浏览一些购物网站常常有一些抽奖的环节它们就会使用一种刮刮乐的形式给用户发一些优惠券或者其它的一些奖品,对此突然产生了些许兴趣于是就琢磨着该如何实现,最终还是选择了can ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...

canvas教程18-刮刮乐

文章目录

一.刮刮乐

二.效果图

篇章

canvas教程18-刮刮乐相关推荐

最新文章

热门文章