《Html5 实例》阅读笔记（二）

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坐标,y坐标,半径,起始角度,终点角度,顺时针或逆时针绘制)

关于透明度的使用，可以参见 [styles and colors](https://developer.mozilla.org /en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) 。

3. 有三种方法设置 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");
   

当然，你可能想到，我直接利用 CSS 改变它的大小不是一样的吗？其实不是这样的，无论你是直接使用 CSS 控制它的大小，还是在 JavaScript 设置 CSS 属性，都不能实质上改变它的小，只能说 Canvas 被拉伸了或者说是收缩了。

4. 我们还可以创建渐变，利用 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 中，下面就用下面这张图片当做例子。
   

   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>
   

这里我们设置当图像加载的时候，就利用 drawImage() 方法将图片绘制在 (0, 0) 的位置上。

demo02.png
这是效果图，可见，这的确是图片的左上角部分，但是由于Canvas的宽高不够，所以将我们的图片进行了裁剪。这种效果可能不是我们想要的，所以我们可能用到 drawImage() 的另一种调用方式，这种参数接收 8 个参数，第一个参数当然是图片变量，接下来就是第一个四元参数 (sx, sy, sw, sh) 代表要捕获的图像数据的左上角位置及其宽度和高度，后一个四元参数 (dx, dy, dw, dh) 表示要在 canvas 元素中图像数据所要复制到的位置的左上角及其宽度和高度。
mycontext.drawImage(img, 400, 450, 200, 200, 0, 0, 200, 200);
这个时候的效果如下
demo03.png

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

demo04.png