canvas 實現刮刮樂

提出問題

在一個電商網站上如何實現刮刮樂的效果？

實現思路

用HTML5 的 canvas 標籤畫圖

在解決問題前，我們先來了解一下 canvas 標籤

canvas 是 html5 出現的新標籤，像所有的 dom 對象一樣它有自己本身的屬性、方法和事件，其中就有繪圖的方法，js 能夠調用它來進行繪圖。

context是一個封裝了很多繪圖功能的對象，獲取這個對象的方法是 :

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");

canvas元素繪製圖像的時候有兩種方法，分別是:

ctx.fill()//填充
ctx.stroke()//繪製邊框

style:在進行圖形繪製前，要設置好繪圖的樣式

ctx.fillStyle()//填充的樣式
ctx.strokeStyle()//邊框樣式

ctx.fillRect(x, y, width, height)
繪製一個填充的矩形

ctx.clearRect(x, y, width, height)
清除指定矩形區域，讓清除部分完全透明。

ctx.beginPath()
新建一條路徑，生成之後，圖形繪製命令被指向到路徑上生成路徑。

ctx.closePath()
閉合路徑之後圖形繪製命令又重新指向到上下文中。

ctx.stroke()
通過線條來繪製圖形輪廓。

ctx.fill()
通過填充路徑的內容區域生成實心的圖形。

ctx.fill();與ctx. stroke()是對應的，一種是填充，一種是描線

ctx.arc()
畫圓弧，有五個參數（x, y, 半徑, 起始角度，結束角度，是否逆時針）

ctx.arc(75,75,50,0,Math.PI*2,true); // 繪製圓
ctx.arc(75,75,35,0,Math.PI,false);   // 口(順時針)半圓

更多屬性詳情請點擊這裏。

代碼實現

實現原理

首先，我們要禁用頁面的鼠標選中拖動的事件，就是不運行執行選中操作。

var bodyStyle = document.body.style; bodyStyle.mozUserSelect = 'none'; bodyStyle.webkitUserSelect = 'none';
接着我們定義圖片類，獲取canvas元素，並設置背景和位置屬性。我們在本例中用到兩張隨機照片，每次刷新隨機一張圖片作爲背景。
監聽圖片加載事件，定義gray顏色。
監聽鼠標事件並畫出圖像。

js 代碼如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>演示：使用HTML5實現刮刮卡效果</title>
<style type="text/css">
.demo{width:320px; margin:10px auto 20px auto; min-height:300px;}
.msg{text-align:center; height:32px; line-height:32px; font-weight:bold; margin-top:50px}
</style>
</head>

<body>
<div id="main">
   <div class="msg">刮開灰色部分看看，<a href="javascript:void(0)" onClick="window.location.reload()">再來一次</a></div>
   <div class="demo">
        <canvas></canvas>
   </div>
</div>

<script type="text/javascript">
var bodyStyle = document.body.style;
//禁用頁面的鼠標選中拖動的事件，就是不運行執行選中操作
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';

var img = new Image();
var canvas = document.querySelector('canvas');

canvas.style.position = 'absolute';
var imgs = ['p_0.jpg','p_1.jpg'];
var num = Math.floor(Math.random()*2);
img.src = imgs[num];

img.addEventListener('load', function(e) {
    var ctx;
    var w = img.width,
        h = img.height;
    var offsetX = canvas.offsetLeft,
        offsetY = canvas.offsetTop;
    var mousedown = false;

    function eventDown(e){
      e.preventDefault();
      mousedown=true;
    }

    function eventUp(e){
      e.preventDefault();
      mousedown=false;
    }

    function eventMove(e){
      e.preventDefault();
        if(mousedown) {
        if(e.changedTouches){
          e=e.changedTouches[0];
        }
        var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
          y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
        with(ctx) {
          beginPath()
          arc(x, y, 10, 0, Math.PI * 2);
          fill();
        }
      }
    }
    console.log(w)
    canvas.width=w;
    canvas.height=h;
    canvas.style.backgroundImage='url('+img.src+')';
    ctx=canvas.getContext('2d');
    ctx.fillStyle = 'gray';
    ctx.fillRect(0, 0, w, h);
    // 在前面銀色圖像下面畫圖
    ctx.globalCompositeOperation = 'destination-out';

    canvas.addEventListener('touchstart', eventDown);
    canvas.addEventListener('touchend', eventUp);
    canvas.addEventListener('touchmove', eventMove);
    canvas.addEventListener('mousedown', eventDown);
    canvas.addEventListener('mouseup', eventUp);
    canvas.addEventListener('mousemove', eventMove);
});
</script>
</body>
</html>

項目demo請點擊這裏。

在這裏再拓展一個canvas畫圖的實例——頁面時鐘
詳細的解釋在文中已有註釋。
js代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="500" style=""></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            function drawClock(){
                context.clearRect(0,0,500,500);
                var now = new Date();
                var sec = now.getSeconds();
                var min = now.getMinutes();
                var hours = now.getHours();
                //小時必須獲取浮點類型 (小時+分鐘/60)
                hours = hours+min/60;
                var hours = hours>12?hours-12:hours;

                context.lineWidth = 1;
                context.strokeStyle = "blue";
                context.beginPath();
                context.arc(250,250,200,0,360,false);
                context.closePath();
                context.stroke();

                for(var i=0;i<60;i++){
                    context.save();
                    context.beginPath();
                    context.lineWidth = 3;
                    context.strokeStyle = "#00aac5";
                    context.translate(250,250);
                    context.rotate(i*6*Math.PI/180);
                    context.moveTo(0,-180);
                    context.lineTo(0,-190);
                    context.closePath();
                    context.stroke();
                    context.restore();
                }

                                for(var i=0;i<12;i++){
                    //保存當前環境的狀態
                  context.save();
                  context.lineWidth = 7;
                  context.strokeStyle = "#000";
                  // 轉移原點
                  context.translate(250,250);
                  // 旋轉
                  context.rotate(i*30*Math.PI/180);
                  context.beginPath();
                  context.moveTo(0,-160);
                  context.lineTo(0,-190);
                  context.closePath();
                  context.stroke();
                  // 返回之前保存過的路徑狀態和屬性
                  context.restore();
                }
                // 繪製時針
                context.save();
                context.lineWidth = 5;
                context.strokeStyle = "#000";
                context.beginPath();
                context.translate(250,250);
                context.rotate(hours*30*Math.PI/180);
                context.moveTo(0,-130);
                context.lineTo(0,10);
                context.closePath();
                context.stroke();
                context.restore();
                // 繪製分針
                context.save();
                context.lineWidth = 3;
                context.strokeStyle = "#000";
                context.beginPath();
                context.translate(250,250);
                context.rotate(min*6*Math.PI/180);
                context.moveTo(0,-140);
                context.lineTo(0,10);
                context.closePath();
                context.stroke();
                context.restore();
                // 繪製秒針
                context.save();
                context.lineWidth = 1;
                context.strokeStyle = "#ff0000";
                context.beginPath();
                context.translate(250,250);
                context.rotate(sec*6*Math.PI/180);
                context.moveTo(0,-160);
                context.lineTo(0,15);
                context.closePath();
                context.stroke();
                context.restore();
            }
            // 1s 畫一次並清除上一次圖案
            setInterval(drawClock,1000);
        </script>
    </body>
</html>

項目DEMO請點擊這裏。

小皮咖

發佈了47 篇原創文章 · 獲贊 32 · 訪問量 9萬+

私信關注

canvas 實現刮刮樂

提出問題

實現思路

在解決問題前，我們先來了解一下 canvas 標籤

代碼實現

js 代碼如下：

一個域名自適應用戶屏幕展現不同內容

javascript 的正則表達式

詳解vue之vuex

詳解vue之better-scroll實現輪播圖和頁面滾動

詳解 JSONP

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結