2. 程式人生 > >html5之Canvas繪製刮刮卡

html5之Canvas繪製刮刮卡

阿新 • • 發佈：2019-01-20
$(function(){ draw(); }) function draw(){ var c=document.getElementById("myCanvas");//定義一個遮罩層 var clientWidth = $(document).width();//獲取瀏覽器當前的可見寬度 var ctx=c.getContext("2d"); ctx.clearRect(0,0,c.width,c.height); //初始化Canvas遮罩層 var img= new Image();//定義遮罩層上懸浮的圖片 img.src = "img/gua_bg.png"
;//定義圖片路徑 img.onload = function(){//必須在圖片載入完成後才可以執行繪製 ctx.rect(0,0,clientWidth,150); ctx.drawImage(img,0,0,clientWidth,154);//將圖片繪製到Canvas上 ctx.textAlign="center";//設定文字樣式居中 ctx.font = "22px MicrosoftYahei";//設定文字大小和字型 ctx.fillText("免費刮獎",c.width/2,50);//設定文字內容以及居中點和起始高度 ctx.font = "18px MicrosoftYahei"
;//設定第二行字大小和字型 ctx.fillText("贏取888元現金紅包",c.width/2,100);//設定文字內容以及居中點和起始高度 } c.addEventListener("touchmove", function(event) {//為遮罩層新增滑鼠拖動事件 event.preventDefault(); for(var i in event.targetTouches){ var touch = event.targetTouches[i]; ctx.clearArc(touch.pageX,touch.pageY,20
);//根據當前觸碰點擦除一圓形區域 } }, false); c.addEventListener("touchstart", function(event) {//滑鼠觸碰開始執行時間 event.preventDefault(); for(var i in event.targetTouches){ var touch = event.targetTouches[i]; ctx.clearArc(touch.pageX,touch.pageY,20);//擦除當前觸碰點圓形區域內容 } }, false); } CanvasRenderingContext2D.prototype.clearArc=function(x,y,radius){//自定義擦除事件 var distance = function(x0,y0,x1,y1){ var dis = Math.sqrt(Math.pow(x0-x1,2)+Math.pow(y0-y1,2)); return Math.round(dis*10000)/10000; }; //首先獲得矩形 var diameter = radius*2;//獲取直徑 var startX = 0; if(null==x||''==x||undefined==x){//防止找不到Console出現錯誤 startX = 0; }else{ startX = parseInt(x-radius); } startX = startX<0?0:startX; var cx = radius-(0-startX); cx = cx-startX; var startY = 0; if(null==y||''==y||undefined==y){//防止找不到Console出現錯誤 startY = 0; }else{ startY = parseInt(y-radius); } var cy = radius-(0-startY); startY = startY<0?0:startY; cy = cy-startY; var imgData = this.getImageData(startX,startY,diameter,diameter);//需要處理的矩形，此處使用getImageData程式需要在Web榮旗下預覽，tomcat或者nginx 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); };

相關推薦

html5之Canvas繪製刮刮卡

$(function(){ draw(); }) function draw(){ var c=document.getElementById("myCanvas");//定義一個遮罩層 var clientWidth = $(document).width();//獲取瀏覽器當前的

HTML5 高階之canvas 繪製圖形

canvas是HTML5中新增的標籤，像所有dom一樣，擁有自己的屬性、方法、和事件，其中就有繪圖的方法，js能夠呼叫它在網頁上完成繪圖。 canvas也是HTML5中最強大的特性之一，允許開發者使用動態和互動式方法在web上實現桌面應用程式的功能 canvas元素會

html5之canvas畫圖 1.寫字板功能

load har line client ctype 監聽事件 tle ntb csdn 寫字板事例： 寫字板分析：1.點擊鼠標開始寫字（onmosedown）2.按下鼠標寫字（onmousemove）3.松開鼠標，停下寫字（

HTML5之canvas元素

矩形 色值 body www rip white col ble script 定義和用法 fillStyle 屬性設置或返回用於填充繪畫的顏色、漸變或模式。 默認值： #000000 JavaScript 語法： context.fillStyle=color|gr

html5中canvas繪製箭頭

網頁端程式碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

HTML5畫布Canvas繪製技能全面深入實戰剖析

簡介：本課程為Canvas系列課程第二課。通過對《絢麗的倒計時效果的學習》，在大家對Canvas繪圖有一定了解的基礎上，本課程對Canvas的各個圖形介面進行了系統詳細地介紹，並輔以示例，讓同學徹底掌握Canvas繪圖，隨心所欲在瀏覽器上繪製炫麗效果！ [color=rgb(242, 1

HTML5之Canvas 2D入門3

知識準備 - 座標系 　　在真正開始總結變換之前，我們需要先了解一下canvas的相關座標系知識。 “畫素座標系”：在HTML中，我們會設定canvas的屬性：width和height，它們是以畫素為單位的，它們描述了canvas最終的呈現區域，我形象稱之為

HTML5之Canvas 2D入門2

canvas只支援一種基本形狀——矩形，所有其它形狀都是通過一個或多個路徑組合而成，甚至是基本的矩形也可以通過路徑組合成。 一、設定畫筆屬性 　　設想我們生活中畫圖的樣子，我們首先是選取合適的顏料和筆，一樣的道理，在canvas中畫圖同樣也是根據需要，不斷的

HTML5之Canvas 2D入門1

Canvas歷史 　　canvas是一個新的HTML元素，這個元素可以被指令碼語言(通常是JavaScript)用來繪製圖形。例如可以用它來畫圖、合成圖象、或做動畫。canvas最先在蘋果公司(Apple)的Mac OS X Dashboard上被引入，而後被

HTML5之Canvas時鐘小程式

這一段時間有空在看Canvas，由於以前開發過ActionScript版本的時鐘，想著Canvas也一定能夠實現，所以花了幾個小時來調了一下，最終出來了，很是開心，所以在這裡記錄一下： 首先奉上效果圖，雖然比較醜，沒有用CSS過多的去渲染，這裡完成了基本功能

html5之canvas困惑 在canvas標籤內需要設定了寬跟高，如果在css中設定同樣的寬跟高，畫出來的影象變形了？

<canvas class="cvs"></canvas>遇到的問題：如css 中設.cvs{width:500px;height:400px;}，也就是css改變了canvas的尺寸後，本來是可以畫出一個圓來，現在卻是一個扁平的圓，為什麼呀？如圖：什

HTML5利用Canvas繪製圖形(繪製漸變、模式、變換)

繪製漸變 漸變是一種很普遍的視覺形象，能帶來視覺上的舒適感。在Canvas中，繪圖API提供了兩個原生的漸變方法，包括線性漸變和徑向漸變。漸變，在顏色集上使用逐步抽樣的演算法，可以應用的描邊樣式和填充樣式中。使用漸變需要三個步驟：首先是建立漸變物件；其次是設定漸變顏色和過渡

HTML5利用Canvas繪製圖形(使用影象、裁剪區域、使用文字。陰影效果和操作畫素)

使用影象 在canvas中插入影象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</t

HTML5 之 Canvas （案例）

**星星閃動動畫** 1、如何輪播一張圖片上的序列幀 2、canvas的幾個主要繪圖API：drawImage()、save()、restore()。 3、如何處理滑鼠事件 筆記： Window API： 迴圈呼叫三種方法： requestAnimFrame(fcunt

安卓鳥學Html5 之Canvas繪圖實踐一

前言 預言帝喬布斯說HTML5將會改變網際網路的生態環境，自從2014年html5的火爆然後對移動開發者是一個衝擊，很多公司紛紛轉戰HTML5個人覺得對我們是一個考驗，然後有朋友去面試直接問會nodejs不，然後 也有朋友轉成hybird開發了，說實在的

canvas實現刮刮卡效果

分享圖片 tlist global site class height fill color overflow canvas實現刮刮卡效果 實現步驟： 設置頁面背景圖，即刮刮卡底部圖片 繪制canvas 刮刮卡頂部圖片drawImage 綁定事件 addEventList

canvas之刮刮樂

init ati var scrip can get class offset rand 效果圖: 代碼: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5

HTML5 CSS3 誘人的例項 canvas 模擬實現電子彩票刮刮樂

                今天給大家帶來一個刮刮樂的小例子~基於HTML5 canvas的，有興趣的可以改成android版本的，或者其他的~效果圖：貼一張我中500w的照片，咋辦啊，怎麼花呢~好了，下面開始原理：1、刮獎區域兩個Canvas，一個是front ， 一個back ，front遮蓋住下面的

HTML5繪圖之Canvas標籤 繪製座標軸

因為最近在做資料的統計，需要表現在網頁上 也查過一些外掛和一些繪圖語言，學習時間成本太高，所以用上了HTML5的Canvas標籤和JavaScript，可以很快的滿足我需要的繪圖需求 JavaScript中前兩句： var canvas1=docume

html5中canvas畫布實現手機端和移動端的刮刮樂效果

用html5中的canvas實現刮刮樂的效果 使用html+css實現背景的樣式 使用clearRect()方法實現掛去的作用 手機端使用addEventListener（）監聽 手機端滑動事件to