js HTML5手机刮刮乐代码


Posted in Javascript onSeptember 29, 2020

手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能, 此功能未完成扇形清除功能, 此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状。如果你找到修复方法请一定要告诉我哟。不过此清除方法用于刮刮乐已经完全满足需求了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>刮刮乐</title>
<script type="text/javascript">
 window.onload = function() {
 init();
 }
 CanvasRenderingContext2D.prototype.clearArc=function(x,y,radius,startAngle, endAngle, counterclockwise){
 var distance = function(x0,y0,x1,y1){
 var dis = Math.sqrt(Math.pow(x0-x1,2)+Math.pow(y0-y1,2));
 //return Math.ceil(dis*10000)/10000;
 return Math.round(dis*10000)/10000;
 };
 //首先获得矩形
 var diameter = radius*2;
 var startX = x-radius;
 var cx = radius-(0-startX);
 startX = startX<0?0:startX;
 cx = cx-startX;
 var startY = y-radius;
 var cy = radius-(0-startY);
 startY = startY<0?0:startY;
 cy = cy-startY;
 var imgData = this.getImageData(startX,startY,diameter,diameter);//需要处理的矩形
 for (var i=0;i<imgData.data.length;i+=4){
 //矩阵内的坐标
 var ii = i/4;
 var ix = Math.floor(ii/imgData.width);
 var iy = ii%imgData.height;
 var dis = distance(ix,iy,cx,cy);
 if(dis<=radius){//此点在圆内
 imgData.data[i+0]=0;
 imgData.data[i+1]=0;
 imgData.data[i+2]=0;
 imgData.data[i+3]=0;
 continue;
 }
 var dr = dis-radius;
 if(dr<Math.SQRT2){
 var n = Math.sqrt(Math.pow(dr, 2)/2)*256;//新
 var o = imgData.data[i+3];
 imgData.data[i+3]=n<o?n:o;
 continue;
 }
 }
 this.putImageData(imgData,startX,startY);
 };
 function init() {
 var imageWidth = 200;
 var imageHeight = 100;
 var gglc = document.getElementById("gglc");
 var gglc2D = gglc.getContext("2d");
 gglc2D.fillStyle = '#cccccc'; //设置覆盖层的颜色
 gglc2D.fillRect(1, 1, imageWidth, imageHeight); //设置覆盖的区域
 //gglc2D.clearArc(25,25,20);
 gglc.addEventListener("touchmove", function(event) {
 event.preventDefault();
 for(var i in event.targetTouches){
 var touch = event.targetTouches[i];
 gglc2D.clearArc(touch.pageX,touch.pageY,20);
 }
 }, false);
 gglc.addEventListener("touchstart", function(event) {
 event.preventDefault();
 for(var i in event.targetTouches){
 var touch = event.targetTouches[i];
 gglc2D.clearArc(touch.pageX,touch.pageY,20);
 }
 }, false);
 }
</script>
</head>
<body>
 <div style="position: relative; width: 100%;height: 100%;">
 <div style="position: absolute; width: 200px; height: 100px; text-align: center;line-height: 100px;border: 1px solid #ccc;'">谢谢惠顾</div>
 <canvas style="position: absolute;" id="gglc" width="201" height="101"></canvas>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
javascript动态加载三
Aug 22 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
原生js的RSA和AES加密解密算法
Oct 08 #Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 #Javascript
微信小程序 实战小程序实例
Oct 08 #Javascript
node.js实现博客小爬虫的实例代码
Oct 08 #Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 #Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 #Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 #Javascript
You might like
用PHP读注册表
2006/10/09 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
js事件(Event)知识整理
2012/10/11 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
python选择排序算法实例总结
2015/07/01 Python
python先序遍历二叉树问题
2017/11/10 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python使用udp实现聊天器功能
2018/12/10 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
django中的图片验证码功能
2019/09/18 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
python2和python3哪个使用率高
2020/06/23 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
元旦活动感言
2014/03/08 职场文书
应届生求职信
2014/05/31 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
python中的None与NULL用法说明
2021/05/25 Python
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android