快捷導(dǎo)航

js HTML5手機(jī)刮刮樂(lè)代碼

更新時(shí)間：2020年09月29日 14:36:10 投稿：lijiao

這篇文章為大家詳細(xì)主要介紹了js HTML5手機(jī)刮刮樂(lè)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

手機(jī)刮刮樂(lè)HTML5代碼, 使用原型prototype擴(kuò)展了一個(gè)clearArc 清除圓內(nèi)像素的功能，此功能未完成扇形清除功能，此外，在清除圓內(nèi)的像素時(shí)，還有點(diǎn)瑕疵，右邊和下邊還不夠圓滑，有明顯的齒狀。如果你找到修復(fù)方法請(qǐng)一定要告訴我喲。不過(guò)此清除方法用于刮刮樂(lè)已經(jīng)完全滿足需求了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>刮刮樂(lè)</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){
 //矩陣內(nèi)的坐標(biāo)
 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){//此點(diǎn)在圓內(nèi)
 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'; //設(shè)置覆蓋層的顏色
 gglc2D.fillRect(1, 1, imageWidth, imageHeight); //設(shè)置覆蓋的區(qū)域
 //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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: