刮刮樂：
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
刮刮樂title
;// document.title = '被刮開的面積'+f.tofixed(2) + '%';
if( f>
200)}}
script
>
body
>
html
>
思路：先採用他物件導向的方法，建立粒子工廠，然後將例項化的粒子放入陣列中，然後我們寫draw函式，對粒子進行操作。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
body
canvas
style
>
head
>
>
>
canvas
>
>
const oc=document.
queryselector
('canvas'
)const cxt=oc.
getcontext
('2d'
)let w=oc.width=window.innerwidth;
let h=oc.height=window.innerheight;
let sumnumber=
500;
let sum=
;let colors=
["red"
,"blue"
,"pink"
,"purple"
,"green"
,"yellow"];
window.
onresize
=function()
//粒子工廠
function
factory()
!function()
}() console.
log(sum);(
function
loop()
)()function
draw()
}
cxt.fillstyle = temp.rgba
cxt.strokestyle = temp.rgba
cxt.
beginpath()
cxt.
arc(temp.x,temp.y,temp.radius,0,
2*math.pi)
cxt.
fill()
cxt.
beginpath()
cxt.
arc(temp.x,temp.y,
(temp.radius+5)
,0,2
*math.pi)
cxt.
stroke()
temp.x+=temp.vx
temp.y+=temp.vy
if( temp.x > w ) temp.x =0if
( temp.x <
0) temp.x = w
if( temp.y > h ) temp.y =0if
( temp.y <
0) temp.y = h
}function
findline
(temp,temp2)
}script
>
body
>
html
>
刮刮樂canvas實現
class scratch config this.movenum 0 this.clearrange clearrange 2 this.canvasid canvasid this.radius radius 25 this.canvas this.canvasid this.ifend fal...
canvas 實現刮刮樂
在解決問題前，我們先來了解一下 canvas 標籤 canvas 是 html5 出現的新標籤，像所有的 dom 物件一樣它有自己本身的屬性 方法和事件，其中就有繪圖的方法，js 能夠呼叫它來進行繪圖。context是乙個封裝了很多繪圖功能的物件，獲取這個物件的方法是 var canvas docu...
總結canvas刮刮樂遊戲
1.刮了圖層後顯示隨機的背景圖，設計滑鼠抬起移動放下事件 2.利用新舊畫素合併的時候被擦掉 ctx.globalcompositeoperation destination out 3.快速移動會出現斷點，那就直接讓兩邊落下的地方連成線 4.利用getimagedata這個方法獲得裡面的data，d...