canvas绘制刮涂层抽奖效果

实现的效果:主要用到画布设置图层覆盖效果globalCompositeOperation属性

实现的源代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>刮刮卡抽奖效果</title><style>* {padding: 0;margin: 0;}#app {width: 600px;height: 400px;line-height: 400px;text-align: center;}#myCanvas {position: fixed;top: 0;left: 0;z-index: 9;}</style></head><body><div id="app">恭喜你中奖iPhone</div><canvas id="myCanvas" width="600" height="400"></canvas><script>var canvas = document.getElementById('myCanvas')var context = canvas.getContext('2d')// 画一个刮奖图层context.fillStyle = '#aaa'context.fillRect(0, 0, canvas.width, canvas.height)context.font = '30px Arial'context.fillStyle = 'red'context.fillText('刮开图层抽奖', 230, 200)// 设置一个变量let flag = false// 鼠标按下将变量设置为truecanvas.onmousedown = function () {flag = true}// 鼠标抬起将变量设置为falsecanvas.onmouseup = function () {flag = false}// 鼠标移动canvas.onmousemove = function (e) {// 获取鼠标在画布中的位置var x = e.offsetXvar y = e.offsetY// 判断鼠标是否在刮奖区域内if (flag) {// 设置图层覆盖模式context.globalCompositeOperation = 'destination-out'// 绘制一个矩形context.fillStyle = '#fff'context.fillRect(x - 10, y - 10, 20, 20)}}</script></body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/144949.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA 新版本设置菜单展开

使用了新版本的IDEA 新UI后&#xff0c;常用的file&#xff0c;view&#xff0c;菜单看不见了&#xff0c;不太适应&#xff0c;找了一下&#xff0c;有个配置可以修改。 打开settings里面把show main menu in a separate toolbar勾选上&#xff0c;应用保存就可以了

冲刺学习-MySQL-常见问题

MySQL索引的最左原则 联合索引的说明 建立三个字段的联合索引联合索引&#xff08;a&#xff0c;b&#xff0c;c&#xff09;相当于建立了索引&#xff1a;&#xff08;a&#xff09;&#xff0c;&#xff08;a&#xff0c;b&#xff09;&#xff0c;&#xff08;a&#xff0…

如何在linux服务器上安装Anaconda与pytorch

如何在linux服务器上安装Anaconda与pytorch 1&#xff0c;安装anaconda1.1 下载anaconda安装包1.2 安装anaconda1.3 设计环境变量1.4 安装完成验证 2 Anaconda安装pytorch2.1 创建虚拟环境2.2 查看现存环境2.3 激活环境2.4 选择合适的pytorch版本下载2.5 检测是否安装成功&…

造车先做三蹦子220101--机器学习字符(字母、和数字识别)的“小白鼠”与“果蝇”

“0”数字字符零 的图片(16*16点阵)&#xff1a; #Letter23Digital23R231006d.pyimport torch import torch.nn as nn import torch.optim as optim #optimizer optim.SGD(model.parameters(), lr0.01) from PIL import Image from PIL import ImageDraw from PIL import Im…

力扣每日一题59:螺旋矩阵||

题目描述&#xff1a; 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&am…

Docker部署SpringBoot +Vue项目流程详解(含域名 + HTTPS)

文章目录 前言1、选购服务器2、部署 Docker3、前端、后端项目打包4、配置 Dockerfile5、配置 Nginx6、配置 DockerCompose6、启动 DockerCompose 完成部署7、【可选】域名 SSL证书 前言 本次整体部署操作使用阿里云服务器&#xff0c;这里我选择的是香港地区的2核2G ECS&…

开源博客项目Blog .NET Core源码学习(4:生成验证码)

开源博客项目Blog中的后台管理登录界面中支持输入验证码&#xff08;如下图所示&#xff09;&#xff0c;本文学习并记录项目中验证码的生成及调用方式。   博客项目中调用VerifyCode类生成验证码&#xff0c;该类位于App.Framwork项目中&#xff0c;命名空间为App.Framwork…

【java爬虫】使用selenium获取某交易所公司半年报数据

引言 上市公司的财报数据一般都会进行公开&#xff0c;我们可以在某交易所的官方网站上查看这些数据&#xff0c;由于数据很多&#xff0c;如果只是手动收集的话可能会比较耗时耗力&#xff0c;我们可以采用爬虫的方法进行数据的获取。 本文就介绍采用selenium框架进行公司财…

QT判断平台和生成版本设置输入目录

QT判断平台和生成版本设置输入目录 pro工程文件中常用的宏定义Chapter1 QT判断平台和生成版本设置输入目录Chapter2 Qt pro文件中判断 x86/arm(aarch64)交叉编译环境&#xff0c;区分 linux/windows系统, debug/release版本Chapter3 Qt的版本判断、跨平台选择与pro工程文件输出…

nginx tomcat 动静分离

动静分离&#xff1a; 访问静态和动态页面分开 实现动态和静态页面负载均衡。 五台虚拟机 实验1&#xff0c;动静分离 思路&#xff1a; 需要设备&#xff1a;三台虚拟机 一台nginx 代理又是静态 两台tomcat 请求动态页面 在全局模块中配置upstream tomcat 新建location…

AD9371 官方例程HDL详解之JESD204B TX_CLK生成 (二)

AD9371 系列快速入口 AD9371ZCU102 移植到 ZCU106 &#xff1a; AD9371 官方例程构建及单音信号收发 ad9371_tx_jesd -->util_ad9371_xcvr接口映射&#xff1a; AD9371 官方例程之 tx_jesd 与 xcvr接口映射 AD9371 官方例程 时钟间的关系与生成 &#xff1a; AD9371 官方…

分享一下我家网络机柜,家庭网络设备推荐

家里网络机柜搞了几天终于搞好了&#xff0c;非专业的&#xff0c;走线有点乱&#xff0c;勿喷。 从上到下的设备分别是&#xff1a; 无线路由器&#xff08;当ap用&#xff09;:TL-XDR6088 插排&#xff1a;德木pdu机柜插排 硬盘录像机&#xff1a;TL-NVR6108-L8P 第二排左边…