HTML笔记17：HTML5画布

canvas 画布元素，属性width、height

1. 绘制矩形

     <canvas id="canvas1" width="200px" height="200px" ></canvas>
     <script>
        var c = document.getElementById("canvas1");  // canvas1对应元素在前，否则无法获取
        var cxt = c.getContext("2d");  // 画笔
        cxt.fillStyle = "#ff0000";
        cxt.fillRect(0,0,100,100);  // 绘制矩形
        }
     </script>

1.1 getContext()

• 返回一个用于画布上绘图的环境，即CanvasRenderingContext2D对象，用于绘画
• 参数，"2d"当前唯一合法参数值

CanvasRenderingContext2D {
canvas: canvas#canvas1
direction: "ltr"
fillStyle: "#000000"  # 设置颜色/模式/渐变
filter: "none"
font: "10px sans-serif"
fontKerning: "auto"
fontStretch: "normal"
fontVariantCaps: "normal"
globalAlpha: 1
globalCompositeOperation: "source-over"
imageSmoothingEnabled: true
imageSmoothingQuality: "low"
letterSpacing: "0px"
lineCap: "butt"
lineDashOffset: 0
lineJoin: "miter"
lineWidth: 1
miterLimit: 10
shadowBlur: 0
shadowColor: "rgba(0, 0, 0, 0)"
shadowOffsetX: 0
shadowOffsetY: 0
strokeStyle: "#000000"
textAlign: "start"
textBaseline: "alphabetic"
textRendering: "auto"
wordSpacing: "0px"
[[Prototype]]: CanvasRenderingContext2D
...}

1.2 context.fillStyle

设置颜色、渐变或模式；默认#000000
context.fillStyle=color|gradient|pattern;

1.3 context.fillRect

绘制被填充的矩形，默认黑色；使用fillStyle用于设置填充
context.fillRect(x,y,width,height);

• x/y: 矩形左上角的 x 坐标或y坐标
• width/height:矩形的宽或高，单位像素

---

2. 绘制圆形

     <canvas id="canvas1" width="200px" height="200px" >浏览器不支持</canvas>
     <script>
        var c = document.getElementById("canvas1");  // canvas1对应元素在前，否则无法获取
        var cxt = c.getContext("2d");  // 画笔

        // 绘制圆形：使用路径绘制
         cxt.beginPath();
        cxt.arc(18,18,18,0,Math.PI*2,true)  
        cxt.closePath();  // 关闭路径
        cxt.fill();  //渲染
     </script>

2.1 context.beginPath

context.beginPath();起始一条路径或重置一条路径

2.2 context.arc()

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

• x/y:圆的中心的坐标
• r : 圆的半径
• sAngle/eAngle :起止角度，以弧度计算，三点钟位置是0

• counterclockwise：可选。默认顺时针，规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

  
  半圆
  弧度说明

2.3 cxt.closePath

context.closePath();创建从当前点到开始点的路径。

无closePath()的stroke效果
有closePath时stroke效果

• 若是fill，则是否有closePath无视觉上的差异

2.4 context.fill

context.fill(); :填充当前的图像（路径）。默认颜色是黑色。
实现具体的操作
提示：请使用 fillStyle 属性来定义另一种颜色/渐变。

注意：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径（正如 closePath() 一样），然后填充该路径。

2.5 context.stroke();

context.stroke(); 实际地绘制出通过 moveTo() 和 lineTo() 等方法定义的路径。默认颜色是黑色。

2.6 context.lineTo

context.lineTo(x,y);添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

• x/y:目标点的x/y坐标

注：起点默认当前，(x,y)为终点的坐标；通过stroke()绘制具体的线条

2.7 context.moveTo

context.moveTo(x,y);把路径移动到画布中的指定点，不创建线条。

• x/y:目标点的x/y坐标

---

3. 绘制图片

     <canvas id="canvas1" width="200px" height="200px" ></canvas>
     <script>
        var c = document.getElementById("canvas1");  // canvas1对应元素在前，否则无法获取
        var cxt = c.getContext("2d");  // 画笔
        // 绘制图片
        var img = new Image();
        img.src = "../img/bg002.jpg";
        // cxt.drawImage(img,0,0); // 对象，x,y
        img.onload = function(){
            cxt.drawImage(img,0,0);  // 先加载成功
        }
     </script>

3.1 drawImage

4. 参考

1. HTML DOM getContext() 方法
2. HTML5 canvas
3. HTML canvas fillRect() 方法
4. HTML canvas beginPath() 方法
5. HTML canvas arc() 方法
6. HTML canvas closePath() 方法
7. HTML canvas lineTo() 方法
8. HTML canvas moveTo() 方法
9. HTML canvas fill() 方法