一、简介
HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片。”
- 矩形空白区域
- 通过 javascript 绘制图形
- 可以加载图片
二、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);//起点