分享一段用canvas和JS製作刮刮樂的代碼,JS部分去掉註釋不到20行代碼效果如下 蓋倫.jpg 蓋倫.jpg 刮刮樂.gif 刮刮樂.gif 沒什麼要特別註意的為了效果加了些CSS樣式 1.為了清除瀏覽器自帶效果加了 2.img需要在灰佈下面,加了z-index;3.圖片絕對定位 js部分分析下 ...
分享一段用canvas和JS製作刮刮樂的代碼,JS部分去掉註釋不到20行代碼
效果如下
蓋倫.jpg
刮刮樂.gif
HTML部分
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>沒什麼要特別註意的
為了效果加了些CSS樣式
CSS部分
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 400px;
height: 300px;
left: 200px;
position: absolute;
z-index: -1;
}
canvas{
margin-left:200px;
}
</style>註意
1.為了清除瀏覽器自帶效果加了
*{ margin: 0; padding: 0; }2.img需要在灰佈下面,加了z-index;
3.圖片絕對定位
js部分
分析下邏輯
1.滑鼠按下移動相應區域刮開
2.滑鼠抬起改變滑鼠位置不接著刮開
js代碼
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
//畫蒙布
context.beginPath();
context.fillStyle= 'grey'
context.fillRect(0,0,400,300);
//滑鼠按下開刮
canvas.onmousedown=function(){
canvas.onmousemove = function(){
//獲取滑鼠坐標
var x = event.clientX;
var y = event.clientY;
//destination-out 顯示原來的不在後來區域的部分
context.globalCompositeOperation = "destination-out";
context.beginPath();
context.arc(x-200,y,30,0,Math.PI*2);
context.fill();
}
}
//滑鼠抬起不刮開
canvas.onmouseup=function(){
canvas.onmousemove = function(){
}
}
</script>需要註意的是
1.圖片和畫布左移了200px,所以圓的起點坐標相對於獲取位置減了200px;
2.globalCompositeOperation是畫布的一個功能作用是設置或返回如何將一個源（新的）圖像繪製到目標（已有）的圖像上,還有其餘10種寫法
學習過程中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！
