js實現刮刮樂抽獎效果程式碼例項
分享一段程式碼例項,它實現了刮刮樂抽獎效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .mapbox{ border:1px solid #000; margin:0 auto; width:400px; height:200px; line-height:200px; text-align:center; font-size:40px; color:transparent; position:relative; cursor:default } .mapbox canvas{ position:absolute; left:0; top:0 } </style> <script> var loaded = function() { var canvas = document.getElementById("map"); var context = canvas.getContext("2d"); var mousedown = false; //底碼 var code = Math.ceil(Math.random() * 4000); //繪製遮罩 function drawMask() { context.save(); context.fillStyle = "#A3A3A3"; context.fillRect(0, 0, canvas.width, canvas.height); context.lineWidth = 5; context.strokeStyle = "#fff"; context.strokeRect(0, 0, canvas.width, canvas.height); context.restore(); context.fillStyle = "#fff"; context.font = "italic 30px sans-serif"; context.textBaseline = 'middle'; context.textAlign = 'center'; context.fillText("刮刮樂", canvas.width / 2, canvas.height / 2); context.restore(); } //繪製塗抹 function drawClip(x, y) { context.save(); //設定組合方式 context.globalCompositeOperation = "destination-out"; //設定新圖形(紅色圓形) context.beginPath(); context.fillStyle = "red"; context.arc(x || canvas.width / 2, y || canvas.height / 2, 30, 0, Math.PI * 2, false); context.fill(); context.restore(); } function canvasMouseDown(event) { mousedown = true; } function canvasMouseUp(event) { mousedown = false; } function canvasMouseMove(event) { if (mousedown) { var event = event || window.event; drawClip(event.offsetX, event.offsetY); } } canvas.addEventListener("mousedown", canvasMouseDown, false); canvas.addEventListener("mouseup", canvasMouseUp, false); canvas.addEventListener("mousemove", canvasMouseMove, false); drawMask(); var mapbox = document.getElementById("mapbox"); mapbox.style.color = "#000"; mapbox.getElementsByTagName("label")[0].innerText = "獎號:" + code; } window.addEventListener("load", loaded, false); </script> </head> <body> <div class="mapbox" id="mapbox"> <label></label> <canvas id="map" width="400" height="200"></canvas> </div> </body> </html>
相關文章
- js不重複抽獎效果程式碼例項JS
- js刮刮樂程式碼例項JS
- jQuery九宮格抽獎效果程式碼例項jQuery
- canvas實現的刮刮樂程式碼例項Canvas
- canvas刮刮樂程式碼例項Canvas
- js實現的垂直選項卡效果程式碼例項JS
- js實現的留言本效果程式碼例項JS
- js實現的div拖動效果例項程式碼JS
- js模擬實現多型效果程式碼例項JS多型
- js實現的元素抖動效果程式碼例項JS
- JavaScript實現隨機抽獎效果JavaScript隨機
- js點選div實現閃爍效果程式碼例項JS
- angularjs實現的購物車效果程式碼例項AngularJS
- iOS 抽獎輪盤效果實現思路iOS
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- css實現矩形切角效果程式碼例項CSS
- js重力球效果程式碼例項JS
- js煙花效果程式碼例項JS
- js鐘錶效果程式碼例項JS
- js秒錶效果程式碼例項JS
- jquery實現的選項卡效果例項程式碼jQuery
- javascript實現的簡單抽獎程式碼JavaScript
- js實現的國家、省、市級聯效果程式碼例項JS
- js實現的數字四捨五入效果程式碼例項JS
- canvas實現的驗證碼效果程式碼例項Canvas
- jquery實現的分頁效果例項程式碼jQuery
- css實現圖片灰度效果程式碼例項CSS
- javascript模擬實現ArrayList效果程式碼例項JavaScript
- canvas實現煙花燃放效果程式碼例項Canvas
- 滑鼠懸浮實現翻牌效果程式碼例項
- canvas實現的鋸齒效果程式碼例項Canvas
- canvas實現的鐘表效果程式碼例項Canvas
- 微信小程式翻牌抽獎效果微信小程式
- js淡入淡出效果例項程式碼JS
- JavaScript簡單抽獎程式的實現及程式碼JavaScript
- js實現的div元素尺寸彈性縮放效果程式碼例項JS
- 原生js實現的多個陣列合並效果程式碼例項JS陣列
- 點選實現顯示密碼效果程式碼例項密碼