JavaScript canvas實(shí)現(xiàn)刮刮樂案例
本文實(shí)例為大家分享了JavaScript canvas實(shí)現(xiàn)刮刮樂效果的具體代碼,供大家參考,具體內(nèi)容如下
效果圖
HTML代碼:
<div class="ggk"> <span id="span">200元</span> <canvas id="canvas"></canvas> </div>
css代碼:
.ggk { width: 200px; height: 100px; border: 1px solid #000; margin: 20px auto; color: red; position: relative; } .ggk span { position: absolute; width: 100%; height: 100%; text-align: center; font-size: 50px; line-height: 100px; } #canvas { position: absolute; left: 0; top: 0; }
js代碼:
var canvas = document.getElementById("canvas") init() function init() { canvas.width = 200; canvas.height = 100; var ctx = canvas.getContext("2d") // 覆蓋一層灰色 ctx.save(); ctx.fillStyle = 'rgb(100,100,100)' ctx.fillRect(0, 0, 200, 100) draw(ctx) pro() } // 隨機(jī)內(nèi)容 function pro() { var span = document.getElementById("span") var arr = ["100元", '謝謝惠顧', '200元', '謝謝惠顧', '謝謝惠顧', '謝謝惠顧', '500萬', '謝謝惠顧'] var num = Math.floor(Math.random() * (arr.length - 1)) var text = arr[num] span.innerHTML = text } function draw(ctx){ // 點(diǎn)下事件 canvas.onmousedown = function(e){ // 移動(dòng)事件 var downX= e.offsetX var downY= e.offsetY ctx.beginPath() // ctx.globalCompositeOperation = 'destination-out' ctx.lineWidth = 10; ctx.moveTo(downX,downY) canvas.onmousemove = function(e){ var x = e.offsetX var y = e.offsetY // ctx.lineTo(x,y) ctx.clearRect(x,y,20,20) ctx.stroke() } } // 鼠標(biāo)彈起事件 canvas.onmouseup = function(){ canvas.onmousemove = null } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序多表聯(lián)合查詢的實(shí)現(xiàn)詳解
小程序設(shè)計(jì)中,通常會(huì)根據(jù)業(yè)務(wù)來做多表的拆分,多表拆分一般是根據(jù)業(yè)務(wù)的特點(diǎn)進(jìn)行拆分。比如我們?cè)谖恼玛P(guān)注的業(yè)務(wù)中,會(huì)將文章和關(guān)注信息拆分成一對(duì)多的表關(guān)系。初學(xué)者可能對(duì)一對(duì)一、一對(duì)多、多對(duì)多的設(shè)計(jì)概念不是特別清楚2022-08-08JS優(yōu)化與惰性載入函數(shù)實(shí)例分析
這篇文章主要介紹了JS優(yōu)化與惰性載入函數(shù),結(jié)合具體實(shí)例形式分析了JS惰性載入的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04js從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09javascritp添加url參數(shù)將參數(shù)加入到url中
javascritp添加url參數(shù)方法,將參數(shù)加入到url中,如果原來url中有則覆蓋,下面是示例代碼,感興趣的朋友可以參考下2014-09-09List the UTC Time on a Computer
List the UTC Time on a Computer...2007-06-06收藏Javascript中常用的55個(gè)經(jīng)典技巧
收藏Javascript中常用的55個(gè)經(jīng)典技巧...2007-08-08