Canvas 画布

一、简介

HTML5 中的定义：“它是依赖分辨率的位图画布，你可以在 canvas 上面绘制任何图形，甚至加载照片。”

• 矩形空白区域
• 通过 javascript 绘制图形
• 可以加载图片

canvas 坐标系

二、HTML 部分

<canvas id="a" width="300" height="300">您的浏览器不支持 canvas</canvas>

简单的在 HTML 页面添加一个 canvas 元素，设定宽高，添加 id 便于 javascript 获取。

• 每个 canvas 初始都是一个白板。
• 样式除了宽高，尽量写在画布里，而不是使用 CSS
• canvas 标签里如果添加文本，那么当浏览器不支持 canvas 时显示文本

三、绘图上下文环境

var a = document.getElementById('a');
var a_context = a.getContext("2d");

• 获取到 canvas 元素
• 调用它的 getContext() 方法获取绘图上下文环境，参数必须为 2d ，未来可能会有 3d
• 基于上下文环境的方法进行绘图

绘图上下文包含所有绘制方法和属性的定义。

四、路径

4.1 beginPath() 开始新路径

当需要画不同的图形或者不同的颜色时使用，表示重新开始新的路径。

同一条路径上的线条和曲线都会是相同的颜色。所以需要绘制不同颜色的时候，必须开启新的路径。

4.2 closePath() 结束路径

用于结束路径，与 beginPath() 并不一定成对出现。

注意：默认结束路径后，图形自动封闭，即首尾相连。所以有些时候不会用到结束路径。

五、直线

5.1 moveTo() 起点坐标

声明直线开始的起点坐标。括号里面填写坐标。

context.moveTo(100,100);

5.2 lineTo() 终点坐标

声明直线结束的终点坐标。括号里面填写坐标。

context.moveTo(100,100);//起点