HTML5笔记 02：canvas

基本用法

1. 什么是 canvas（画布）？

• <canvas>是HTML5新增的元素，可用于通过使用JS中的脚本来绘制图形
• 可以用于绘制图形，创建动画
• <canvas>在使用时建议成对出现，默认高度为 300px，默认宽度为 150px

2. 替换内容

• 很容易定义一些替代内容，由于某些教老的浏览器（IE8之前）不支持canvas，因此要在浏览器上展示些替代内容
• 只需要将替换内容写在内即可：支持canvas的浏览器会忽略这些内容，正常渲染canvas；不支持的浏览器会显示代替内容

<canvas id="test">
  <span>您的浏览器不支持canvas，请换用其他浏览器尝试</span>
</canvas>

3. canvas 标签的两个属性

• 标签只有两个属性：width 和 height，两个都是可选的
• 当没有设置宽度和高度的时候，canvas会初始化宽度为300px，高度为150px
• html属性设置宽高时，只影响画布本身不影响画布内容（常用）
• css属性设置宽高时不但会影响画布本身的宽高，还会使画布中的内容等比例缩放（缩放参照于默认画布的尺寸）

<canvas id="test" width="300" height="300">
  <span>您的浏览器不支持canvas，请换用其他浏览器尝试</span>
</canvas>

4. 渲染上下文

• <canvas>元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，需要找到它的渲染上下文
• <canvas>元素有一个 getContext() 方法，用来获取渲染上下文和它的绘画功能
• getContext() 只有一个参数：上下文的格式

window.onload = function () {
   
  // 拿到画布
  var testNode = document.querySelector("#test");
  if (testNode.getContext) {
   
    // 拿到画笔
    var ctx = testNode.getContext("2d");
  }
};

绘制矩形

元素canvas只支持一种原生的图形绘制：矩形。其他的所有图形的绘制都至少需要生成一条路径。

1.绘制矩形的方法

• 绘制一个填充的矩形（填充色默认为黑色）

var ctx = canvas.getContext('2d');
// 参数：x偏移量 y偏移量 矩形的宽度 矩形的高度
ctx.fillRect(10, 20, 100, 50);

• 绘制一个带边框的矩形（1px实心黑色）

var ctx = canvas.getContext('2d');
// canvas画边框时，边框宽度默认为1px，是从偏移量两侧各画0.5px，但由于像素不支持小数，因此此时的边框取整数是两侧各1px共2px
ctx.strokeRect(10, 20, 100, 50);
// 此时可以在两侧加减0.5px刚好为整数，可以画出1px的边框
ctx.strokeRect(100.5, 200.5, 100, 50);

• 清除指定矩形区域，让清除部分完全透明

var ctx = canvas.getContext('2d');
ctx.strokeRect(10, 20, 100, 50);
// 在指定位置上叠加一个与背景颜色相同的矩形
ctx.clearRect(10, 20, 100, 50);

2.添加样式和颜色

• 设置图形的填充颜色

var ctx = canvas.getContext('2d');
// 设置图形的填充颜色
ctx.fillStyle = 'tomato';
ctx.fillRect(10, 20, 100, 50);

• 设置图形轮廓的颜色

var ctx = canvas.getContext('2d');
// 设置图形轮廓的颜色
ctx.strokeStyle = 'pink';
ctx.strokeRect(10, 20, 100, 50);

• 设置当前画线的粗细，属性值必须为正数，默认值为1.0

var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'pink';
// 设置当前画线的粗细
ctx.lineWidth = 10;
ctx.strokeRect(10, 20, 100, 50);

注意：后绘制的会覆盖先绘制的

• 设定线条与线条间接合处的样式（默认是miter）

var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'pink';
ctx.lineWidth = 10;
// round：圆角；bevel：斜角；miter：直角
ctx.lineJoin = 'bevel';
ctx.strokeRect(10, 20, 100, 50);

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

1. 步骤

1. 创建路径起始点
2. 使用画图命令画出路径
3. 将路径封闭
4. 一旦路径生成，就能通过描边或填充路径区域来渲染图形

2. 绘制三角形

var ctx = canvas.getContext('2d');
// 将笔触移动到指定的坐标上，一般使用该方法设置路径起始点
ctx.moveTo(50, 50);
// 将笔触移动到指定的坐标上，绘制一条从当前位置到指定坐标位置的直线
ctx.lineTo(50, 100);
ctx.lineTo(100, 100);
// 封闭路径，相当于ctx.lineTo(50, 50);手动封闭
ctx.closePath();
// 通过线条绘制图形轮廓
ctx.stroke();

// 清空路径队列，在一个图形绘制完毕后执行此方法再去绘制新的图形。
// 在此时如果不清空，上面的路径也会被填充
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(100, 200);
ctx.lineTo(200