--- theme: smartblue --- 我正在学习[《SSR 实战：官网开发指南》](https://juejin.cn/book/7137945369635192836?utm_source=luckyf&utm_medium=article&utm_campaign=xiaoce_gw_20220919)小册！字节跳动前端开发工程师祯民，带你基于 SSR 技术，全链路还原官网实际开发场景！现在 6 折优惠，仅需 17.94 元哦～微信图片_20220920110236.jpg

我正在参加「码上掘金挑战赛」详情请看：[码上掘金挑战赛来了！](https://juejin.cn/post/7139728821862793223 "https://juejin.cn/post/7139728821862793223") # 前言今天在一个彩票网站看到了一个刮刮乐的效果，觉得挺有意思的就打算来仿写一个，经过一番简单的思考大概就有了基本都想法。总体效果使用Canvas制作设置抽奖概率的刮刮乐，制作过程不算繁琐，非常简单。 # 体验 [代码片段](https://code.juejin.cn/pen/7142769003310628868) # 制作 ## html 一个居中的标题和刮卡区域。 ```html

刮刮乐

不抽大嘴巴子

``` ## css 添加样式 ```css #ggk { width: 400px; height: 100px; position: relative; left: 50%; transform: translate(-50%, 0); } .jp, canvas { position: absolute; width: 400px; height: 100px; left: 0; top: 0; text-align: center; font-size: 25px; line-height: 100px; color: deeppink; } ``` ## 默认鼠标拖拽不会选中文字。 ```js document.addEventListener("selectstart", function (e) { e.preventDefault(); }) ``` ## canvas 设置Canvas画布。 ```js let canvas = document.querySelector("#canvas"); let ctx = canvas.getContext('2d'); ctx.fillStyle = 'darkgray'; ctx.fillRect(0, 0, 400, 100); ``` ## 绘制判断鼠标是否按下。 ```js let isDraw = false; canvas.onmousedown = function () { isDraw = true; } ``` 鼠标按下isDraw为true的话，才可以涂抹，把Canvas的灰色涂抹掉。 ```js let ggkDom = document.querySelector('#ggk'); let jp = document.querySelector('.jp'); canvas.onmousemove = function (e) { if (isDraw) { let x = e.pageX - ggkDom.offsetLeft + ggkDom.offsetWidth / 2; let y = e.pageY - ggkDom.offsetTop; ctx.beginPath(); ctx.arc(x, y, 30, 0, 2 * Math.PI); ctx.globalCompositeOperation = 'destination-out'; ctx.fill(); ctx.closePath(); } } ``` 鼠标弹起时，isDraw为flase ```js document.onmouseup = function () { isDraw = false; } ``` ## 奖品设置奖品，p是中奖率。 ```js let arr = [ { content: '一等奖：一个大嘴巴子', p: 0.1 }, { content: '二等奖：两个大嘴巴子', p: 0.2 }, { content: '三等奖：三个大嘴巴子', p: 0.3 } ]; ``` 创建一个随机数 ```js let sj = Math.random(); ``` 随机数去判断，判断成功后，返回成功的值。 ```js if (sj < arr[0].p) { jp.innerHTML = arr[0].content; } else if (sj < arr[1].p) { jp.innerHTML = arr[1].content; } else if (sj < arr[2].p) { jp.innerHTML = arr[2].content; } ``` # 最后其实使用这个还可以利用这个制作签名，绘画等功能，因为都是涂抹或者绘画东西，大概是差不多的，有兴趣可以去学习了解一下。 **距离国庆还有16天，距离放假还有16天！！！**