手机刮刮乐html5代码
手机刮刮乐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 ‘ 谢谢惠顾 /div
canvas >
本文档为【手机刮刮乐html5代码】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。
该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。
[版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
浙公网安备 33021202002483