HTML5：canvas

1.canvas是inline-block元素，canvas和 img相同，不建议用css控制canvas初始宽高。
2.canvas的使用：
1）html定义canvas：<canvas id ='canvas'></canvas>

2. js获取元素: var canvas = document.getElementById('canvas')
3. 获取上下文：var ctx = canvas.getContext('2d')
4. 填充颜色：ctx.fillStyle = 'green'
5. 填充样式（rect长方形）： ctx.rect(左上角的x坐标，左上角的y坐标，宽度，长度)
   【fillStyle要比rect早】

canvas使用教程：https://developer.cdn.mozilla.net/zh-CN/docs/Web/API/Canvas_API/Tutorial

• 画矩形（Rectangular）例子：

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}

输出形状：

图片.png

• 画三角形

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}

输出形状：

图片.png