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 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
JS实现时间校验的代码
May 25 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简单获取复选框值的方法
2016/05/11 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
思想专业自荐信范文
2013/12/25 职场文书
房地产开盘策划方案
2014/02/10 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
妈妈活动方案
2014/08/15 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
商场广播稿范文
2015/08/19 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
离婚协议书格式范本
2016/03/18 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书