現在的位置: 首頁 > web前端 > 正文

html刮刮卡效果實現

2020年07月14日 web前端 ⁄ 共 986字 ⁄ 字號 評論關閉

  你玩過刮刮卡么?一不小心可以中獎的那種。今天我給大家分享一個基于HTML5技術實現的刮刮卡效果,在PC上只需按住鼠標,在手機上你只需按住指頭,輕輕刮去圖層就可以模擬真實的刮獎效果。


  使用HTML5實現刮刮卡效果


  查看演示下載源碼


  我們利用HTML5的畫布Canvas,結合其提供的API,在Canvas元素上繪制一個灰色蒙層,然后通過檢測用戶鼠標移到和手勢來繪制一個透明的圖形,這樣就能看到Canvas背景下的真實圖片,就達到刮刮卡效果。


  HTML


  我們只需要在頁面中加入canvas標簽元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,運行在支持HTML5的現代瀏覽器上。


  <canvas></canvas>


  Javascript


  首先,我們要禁用頁面的鼠標選中拖動的事件,就是不運行執行選中操作。


  varbodyStyle=document.body.style;


  bodyStyle.mozUserSelect='none';


  bodyStyle.webkitUserSelect='none';


  接著我們定義圖片類,獲取canvas元素,并設置背景和位置屬性。我們在本例中用到兩張隨機照片,每次刷新隨機一張圖片作為背景。


  HTML5實現刮刮卡代碼


  varimg=newImage();


  varcanvas=document.querySelector('canvas');


  canvas.style.backgroundColor='transparent';


  canvas.style.position='absolute';


  varimgs=['p_0.jpg','p_1.jpg'];


  varnum=Math.floor(Math.random()*2);


  img.src=imgs[num];


  然后進入主體,當檢測到圖片加載完的時候,首先定義一些屬性和函數,函數layer()用來繪制一個灰色的正方形,eventDown()定義了按下事件eventUp()定義了松開事件,eventMove()定義了移動事件,其中當按下時,獲取坐標位移,并通過arc(x,y,10,0,Math.PI*2)來繪制小圓點。


  總之,HTML5實現刮刮卡給大家簡單的介紹了一些,希望大家多看看。

抱歉!評論已關閉.

奔驰宝马破解版下载 天津快乐10分钟软件 000538股票行情 好运彩3预测 股票配资推荐就择卓信宝配资优异 3D之家*_福星彩 天津十一选五开奖结果查询 急速赛车计划 山东11选五5预测 易宝配资 河南今天11选5走势图 波浪囗诀错误 11选5天津中奖规则 股票推荐网站可信吗 北京pk全天计划网 最全的福彩3d技巧之一 体彩内蒙古11选5玩法