canvas实现刮刮乐
canvas实现刮刮乐主要是要注意两个地方:第一个是将绘制的图形设置成背景图片(用到toDataURL属性),这样在擦覆盖层的时候才不会丢失绘制的图案,
第二个是设置在绘制插图的时候,设置透明透明(用到globalCompositeOperation属性)
代码如下:
<script> var arr=[ {name:"iphone7 磨砂黑",color:"rgba(255,255,0,1)"}, {name:"iphone7 磨砂黑",color:"rgba(0,255,0,.9)"}, {name:"iphone7 磨砂黑",color:"rgba(10,255,255,1)"}, {name:"iphone7 磨砂黑",color:"rgba(10,255,100,1)"} ] var r=Math.random(); var rIndex= Math.floor(r*arr.length); var rPrice=arr[rIndex]; var cv=document.getElementsByTagName('canvas')[0]; var isDown=false; cv.height=400; cv.width=600; var ctx=cv.getContext("2d"); function toAngle(radian){ return radian/Math.PI*180; } function toRadian(angle){ return angle/180*Math.PI; } ctx.textAlign="center"; ctx.textBaseline="middle"; ctx.font="30px consolas"; ctx.fillStyle=rPrice.color; ctx.fillText(rPrice.name,cv.width/2,cv.height/2); var dataURL=cv.toDataURL("image/jpg",1); cv.style.background="url("+dataURL+")"; //覆盖层 ctx.beginPath(); ctx.fillStyle="#eee"; ctx.fillRect(0,0,cv.width,cv.height); cv.addEventListener("mousedown",function(){ isDown=true; }) cv.addEventListener("mouseup",function(){ isDown=false; ctx.globalCompositeOperation="source-out" }) cv.addEventListener("mousemove",function(e){ if (isDown){ ctx.globalCompositeOperation="destination-out"; ctx.beginPath(); var posObj=cv.getBoundingClientRect(); var left=posObj.left; var top=posObj.top; var x= e.clientX-left; var y= e.clientY-top; ctx.arc(x,y,50,0,Math.PI*2); ctx.fill(); } }) </script>

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

本文解释了如何使用&lt; audio&gt;元素,包括用于格式选择的最佳实践(MP3,OGG Vorbis),文件优化和JavaScript控件用于播放。 它强调使用多个音频f

本文讨论了使用HTML5页面可见性API来检测页面可见性,提高用户体验并优化资源使用情况。关键方面包括暂停媒体,减少CPU负载以及基于可见性变化管理分析。

本文解释了如何创建和验证HTML5表格。 它详细介绍了&gt;元素,输入类型(文本,电子邮件,编号等)和属性(必需,模式,最小,最大)。 HTML5的优势比旧方法形成

本文讨论了使用视口元标记来控制移动设备上的页面缩放,重点是宽度和初始尺度之类的设置,以获得最佳响应和性能。

本文讨论了使用GeOlocation API管理用户位置隐私和权限,并强调要求权限,确保数据安全性并遵守隐私法律的最佳实践。

本文使用JavaScript详细介绍了创建Interactive HTML5游戏。 它涵盖了游戏设计,HTML结构,CSS样式,JavaScript逻辑(包括事件处理和动画)以及音频集成。 必需的JavaScript库(Phaser,Pi

本文解释了HTML5 Websockets API,用于实时双向客户服务器通信。 它详细详细介绍了客户端(JavaScript)和服务器端(Python/Flask)的实现,以应对可伸缩性,状态管理,一个挑战
