1. 在 MDC canvas 教程 可以查看到 canvas 的更多信息。

2. 可以在 Canvas 中繪制有一定透明度的圖形，如下所示。
   <script>
   var canvas = document.getElementById("mycanvas");
   var mycontext = canvas.getContext("2d");

        mycontext.beginPath();
        mycontext.arc(40, 40, 25, 0, Math.PI * 2, true);
        mycontext.closePath();
        mycontext.fillStyle = "#f00";
        mycontext.fill();
   
        mycontext.beginPath();
        mycontext.arc(70, 40, 25, 0, Math.PI * 2, true);
        mycontext.closePath();
        mycontext.fillStyle = "rgba(0,0,255,0.5)";
        mycontext.fill();
    </script>
   

   繪制的效果如下所示
   

   demo1.png
   
   arc(x坐標(biāo),y坐標(biāo),半徑,起始角度,終點(diǎn)角度,順時(shí)針或逆時(shí)針繪制)

關(guān)于透明度的使用，可以參見 [styles and colors](https://developer.mozilla.org /en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) 。

3. 有三種方法設(shè)置 canvas 的大小。一種是直接給 canvas 指定 width 和 height 屬性
   <canvas width="200" height="200" id="mycanvas"></canvas>
   其它兩種都是通過 JavaScript 控制的
   // 第一種
   mycontext.width = 200;
   mycontext.height = 200;

    //第二種
    mycontext.setAttribute("width", "200");
    mycontext.setAttribute("height", "200");
   

當(dāng)然，你可能想到，我直接利用 CSS 改變它的大小不是一樣的嗎？其實(shí)不是這樣的，無論你是直接使用 CSS 控制它的大小，還是在 JavaScript 設(shè)置 CSS 屬性，都不能實(shí)質(zhì)上改變它的小，只能說 Canvas 被拉伸了或者說是收縮了。

4. 我們還可以創(chuàng)建漸變，利用 createLinearGradient(startX, startY, endX, endY) 方法。
   <script>
   var canvas = document.getElementById("mycanvas");
   var mycontext = canvas.getContext("2d");

        mycontext.beginPath();
        mycontext.lineWidth = "12";
        mycontext.lineCap = "round";
        mycontext.lineJoin = "round";
   
        var linegrad = mycontext.createLinearGradient(20, 20, 40, 60);
        linegrad.addColorStop(0.5, "#0f0");
        linegrad.addColorStop(1, "#fff");
        mycontext.fillStyle = linegrad;
   
        mycontext.moveTo(20, 20);
        mycontext.lineTo(50, 50);
        mycontext.lineTo(20, 70);
        mycontext.closePath();
        mycontext.fill();
   
    </script>
   

5. 可以將我們的圖片繪制在 Canvas 中，下面就用下面這張圖片當(dāng)做例子。
   

   1.jpg
   
   <script>
   var canvas = document.getElementById("mycanvas");
   var mycontext = canvas.getContext("2d");

        var img = new Image();
        img.onload = function () {
            mycontext.drawImage(img, 0, 0);
        }
        img.src = "one.jpg";
    
    </script>
   

這里我們?cè)O(shè)置當(dāng)圖像加載的時(shí)候，就利用 drawImage() 方法將圖片繪制在 (0, 0) 的位置上。

demo02.png

demo03.png

6. 在 Canvas 中放置文本有兩種方式 fillText() 和 strokeText() 使用方法和效果如下
   mycontext.font = "25pt Arial";
   mycontext.fillText("Hello canvas", 20, 50);
   mycontext.strokeText("Hello canvas", 20, 100);

demo04.png