js+canvas實(shí)現(xiàn)刮刮獎(jiǎng)功能
本文實(shí)例為大家分享了js+canvas實(shí)現(xiàn)刮刮獎(jiǎng)的具體代碼，供大家參考，具體內(nèi)容如下
1.實(shí)現(xiàn)了PC端的刮刮獎(jiǎng)效果
2.使用了canvas的文本，像素操作，合成，繪制圖形，隨機(jī)數(shù)
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>刮刮獎(jiǎng)</title> <style type='text/css'> * { margin: 0; padding: 0; } .box { width: 500px; height: 500px; margin: 0 auto; position: relative; background: #00BFFF; } #prize { width: 300px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -150px; background: #fff; font-family: '微軟雅黑'; font-size: 40px; text-align: center; line-height: 100px; -webkit-user-select: none; } #myCanvas { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -150px; } </style> </head> <body> <div class='box'> <div id='prize'></div> <canvas height='100'></canvas> </div> </body> <script type='text/javascript'> //獲取對(duì)象 var textArr = ['一等獎(jiǎng)', '二等獎(jiǎng)', '三等獎(jiǎng)', '謝謝惠顧', '再來一次']; var prize = document.getElementById('prize'); var num = Math.random() * 100; if (num <= 60) { prize.innerText = textArr[3]; } else if (num <= 70) { prize.innerText = textArr[4]; } else if (num <= 80) { prize.innerText = textArr[2]; } else if (num <= 90) { prize.innerText = textArr[1]; } else if (num <= 100) { prize.innerText = textArr[0]; } var myCanvas = document.getElementById('myCanvas'); // 搭建環(huán)境 var cxt = myCanvas.getContext('2d'); cxt.globalAlpha = 1; cxt.fillStyle = '#ccc'; cxt.fillRect(0, 0, 300, 100); var txt = '刮刮獎(jiǎng)'; cxt.fillStyle = '#000'; cxt.font = '30px 微軟雅黑'; cxt.textAlign = 'center'; cxt.textBaseline = 'middle'; cxt.fillText(txt, 150, 50, 300); var mX, mY; var flag = false; myCanvas.onmousedown = function(e) { flag = true; mX = e.offsetX; mY = e.offsetY; drawArc(mX, mY); } document.body.onmousemove = function(e) { if (flag == true) { mX = e.offsetX; mY = e.offsetY; drawArc(mX, mY); } } document.body.onmouseup = function() { flag = false; sayPrize(); } function drawArc(x, y) { cxt.globalCompositeOperation = 'destination-out'; //相交部分不顯示 cxt.beginPath(); cxt.fillStyle = 'white'; cxt.moveTo(x, y); cxt.arc(x, y, 10, 0, 2 * Math.PI); cxt.fill(); } function sayPrize() { var myImg = cxt.getImageData(70, 30, 160, 40); // var myImg = cxt.getImageData(93, 37, 40, 30); // 設(shè)置像素點(diǎn)的顏色 var num = 0; var max = myImg.data.length / 4; for (var i = 0; i < myImg.data.length; i += 4) { if (myImg.data[i + 3] <= 200) { num++; } } //2/3*myImg.data.length/4 if (num >= max * 0.6) { alert('恭喜您,獲得：' + prize.innerText); } } </script></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. IntelliJ IDEA導(dǎo)入項(xiàng)目的方法2. vue 組件簡(jiǎn)介3. Python ini文件常用操作方法解析4. ASP常用源代碼的總結(jié)（下）5. vue實(shí)現(xiàn)視頻上傳功能6. Android View 事件防抖的兩種方案7. Java 實(shí)現(xiàn)定時(shí)任務(wù)的三種方法8. 基于Java實(shí)現(xiàn)記事本功能9. Android抽屜布局DrawerLayout的簡(jiǎn)單使用10. Spring Cloud Alibaba整合Sentinel的實(shí)現(xiàn)步驟
網(wǎng)公網(wǎng)安備