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 相关文章推荐
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
javascript操作excel生成报表示例
May 08 Javascript
Node.js+Express配置入门教程
May 19 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
vue实现的请求服务器端API接口示例
May 25 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
React四级菜单的实现
Apr 08 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为php增加openssl模块的方法
2011/06/14 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
canvas实现钟表效果
2017/02/13 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python 性能优化技巧总结
2016/11/01 Python
通过cmd进入python的实例操作
2019/06/26 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python实现同一局域网下传输图片
2020/03/20 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
《燕子专列》教学反思
2014/02/21 职场文书
校长寄语大全
2014/04/09 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
导游词之安徽九华山
2019/09/18 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers