20行JS代碼實現(xiàn)網(wǎng)頁刮刮樂效果
分享一段用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.鼠標(biāo)按下移動相應(yīng)區(qū)域刮開
2.鼠標(biāo)抬起改變鼠標(biāo)位置不接著刮開
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); //鼠標(biāo)按下開刮 canvas.onmousedown=function(){ canvas.onmousemove = function(){ //獲取鼠標(biāo)坐標(biāo) var x = event.clientX; var y = event.clientY; //destination-out 顯示原來的不在后來區(qū)域的部分 context.globalCompositeOperation = "destination-out"; context.beginPath(); context.arc(x-200,y,30,0,Math.PI*2); context.fill(); } } //鼠標(biāo)抬起不刮開 canvas.onmouseup=function(){ canvas.onmousemove = function(){ } } </script>
需要注意的是
1.圖片和畫布左移了200px,所以圓的起點坐標(biāo)相對于獲取位置減了200px;
2.globalCompositeOperation是畫布的一個功能作用是設(shè)置或返回如何將一個源(新的)圖像繪制到目標(biāo)(已有)的圖像上,還有其余10種寫法
以上這篇20行JS代碼實現(xiàn)網(wǎng)頁刮刮樂效果就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
利用Node.js創(chuàng)建一個密碼生成器的全步驟
這篇文章主要給大家介紹了關(guān)于如何利用Node.js創(chuàng)建一個密碼生成器的相關(guān)資料,文章將實現(xiàn)的步驟一步步介紹的非常詳細(xì),對大家具有也一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-07-07ECMAScript 6即將帶給我們新的數(shù)組操作方法前瞻
這篇文章主要介紹了ECMAScript 6即將帶給我們新的數(shù)組操作方法前瞻,需要的朋友可以參考下2015-01-01在layui中使用form表單監(jiān)聽ajax異步驗證注冊的實例
今天小編就為大家分享一篇在layui中使用form表單監(jiān)聽ajax異步驗證注冊的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS統(tǒng)計Flash被網(wǎng)友點擊過的代碼
JS統(tǒng)計Flash被網(wǎng)友點擊過的代碼...2007-05-05uniapp使用u-upload組件來實現(xiàn)圖片上傳功能
最近在用uniapp開發(fā)微信小程序,下面這篇文章主要給大家介紹了關(guān)于uniapp使用u-upload組件來實現(xiàn)圖片上傳功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01