canvas刮刮樂程式碼例項
分享一段程式碼例項,它實現了刮刮樂效果。
用滑鼠在上面擦拭,也可以出現開獎效果,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .beijing { height: 185px; width: 400px; background-color: #c01319; } .zi { text-align: center; } .zi span { margin-top: 50px; font-size: 24px; font-family: "微軟雅黑"; color: #c01319; font-weight: bold; padding: 20px 0; width: 300px; background-color: yellow; display: inline-block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #canvas { position: absolute; top: 8px; left: 8px; } </style> <script type="text/javascript"> window.onload = function() { var Zi = document.getElementById("Zi") var oCanvas = document.getElementById("canvas") var context = oCanvas.getContext("2d") //canvas上邊的佈局 context.save(); context.beginPath(); context.fillStyle = "transparent"; context.fillRect(0, 0, 400, 185); context.fill(); context.closePath(); context.restore(); //畫畫布上的灰色遮蓋 context.save() context.beginPath() context.fillStyle = "#c0c0c0" context.fillRect(50, 50, 300, 71) context.fill() context.closePath() context.restore() //當滑鼠移動時刷成透明色 function shua() { document.onmousemove = function() { context.globalCompositeOperation = "destination-out" var X = event.clientX var Y = event.clientY context.save() context.beginPath() context.arc(X, Y, 25, 0, 2 * Math.PI, true) context.fill() context.closePath() context.restore() } } //背景的佈局以及文字的產生 shua() huanzi() function huanzi() { var m = "" var n = Math.random() x = n.toFixed(1) console.log(x); if (x == 0.0 || x == 0.1) { m += "一等獎:100塊" } else if (x > 0.1 && x < 0.4) { m += "二等獎:10塊" } else if (x > 0.4 && x < 0.8) { m += "三等獎:5塊" } else if (x == 1.0) { m += "特等獎:我 >_<!" } else { m += "這都抽不中,手真臭" } Zi.innerText = m } } </script> </head> <body> <div class="beijing"> <div class="zi"> <span id="Zi"></span> </div> </div> <canvas id="canvas" width="400" height="185"></canvas> </body> </html>
相關文章
- canvas實現的刮刮樂程式碼例項Canvas
- js刮刮樂程式碼例項JS
- js實現刮刮樂抽獎效果程式碼例項JS
- canvas畫圖程式碼例項Canvas
- canvas小遊戲程式碼例項Canvas遊戲
- canvas火焰效果程式碼例項Canvas
- canvas繪製扇形程式碼例項Canvas
- canvas繪製星星程式碼例項Canvas
- canvas字母雨效果程式碼例項Canvas
- canvas載入效果程式碼例項Canvas
- canvas 繪製雞蛋程式碼例項Canvas
- canvas縮放div程式碼例項Canvas
- canvas擺動效果程式碼例項Canvas
- canvas水位進度效果程式碼例項Canvas
- canvas原型鐘錶效果程式碼例項Canvas原型
- canvas氣泡上浮效果程式碼例項Canvas
- canvas寫字板功能程式碼例項Canvas
- canvas繪製網格程式碼例項Canvas
- canvas貪吃蛇遊戲程式碼例項Canvas遊戲
- canvas田字格效果程式碼例項Canvas
- canvas徑向漸變程式碼例項Canvas
- canvas繪製笑臉程式碼例項Canvas
- canvas繪製圓環效果程式碼例項Canvas
- canvas線性漸變程式碼例項Canvas
- canvas螞蟻線效果程式碼例項Canvas
- canvas繪製米字旗程式碼例項Canvas
- canvas模擬彈幕效果程式碼例項Canvas
- canvas繪製箭頭效果程式碼例項Canvas
- canvas translate()、scale()和rotate()方法程式碼例項Canvas
- canvas繪製拋物線程式碼例項Canvas線程
- canvas繪製機器貓程式碼例項Canvas
- canvas繪製夜空小屋效果程式碼例項Canvas
- canvas流星劃過星空效果程式碼例項Canvas
- canvas繪製鐘錶效果程式碼例項Canvas
- canvas繪製圓角矩形程式碼例項Canvas
- canvas實現的美猴王程式碼例項Canvas
- canvas小球隨機漂浮碰撞程式碼例項Canvas隨機
- canvas繪製橢圓效果程式碼例項Canvas