js+canvas 스크래치 기능 구현

3598 단어 jscanvas상을 긁다
본고의 실례는 여러분에게 js+canvas가 스크레이퍼를 실현하는 구체적인 코드를 공유하여 참고하도록 하였으며, 구체적인 내용은 다음과 같다.
1.PC쪽 스크래치 효과 구현
2. canvas를 사용한 텍스트, 픽셀 조작, 합성, 도형 그리기, 무작위 수

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title> </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 id="myCanvas" width="300" height="100"></canvas>
 </div>
 </body>
 <script type="text/javascript">
 // 
 var textArr = [" ", " ", " ", " ", " "];
 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");
 //  
 var cxt = myCanvas.getContext("2d");
 cxt.globalAlpha = 1;
 cxt.fillStyle = "#ccc";
 cxt.fillRect(0, 0, 300, 100);
 var txt = " ";
 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);
 //  
 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>
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

좋은 웹페이지 즐겨찾기