canvas就是画布,是一个矩形区域,用于在网页上绘制2D图形和图像。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas坐标体系
电脑上的坐标系和数学上的坐标系稍微有点不同,坐标的原点在绘制区域(这里是Canvas)的左上角,X轴正向朝右,Y轴正向朝下,如下图:
起点为左上角,坐标为 (0,0) 。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边(X 轴)x 像素,距离上边(Y 轴)y 像素,坐标为 (x,y)。
首先概要说明使用HTML5 canvas绘图的方法步骤
是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。
只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。如:
使用javascript在
获取
var canvas = document.getElementById("MyCanvas ");
调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;如:
var context = canvas.getContext("2d");
调用CanvasRenderingContext2D对象进行绘图。如画一条直线:
//设置对象起始点和终点
context.moveTo(10,10);
context.lineTo(200,200);
下面给出比较完整的代码
#canvas{
border: 1px solid #ADACB0;
display: block;
margin: 20px auto;
}
你的浏览器还不支持canvas
var canvas = document.getElementById("MyCanvas");
var context = canvas.getContext("2d");
//设置对象起始点和终点
context.moveTo(10,10);
context.lineTo(200,200);
//设置样式
context.lineWidth = 2; //线宽
//绘制
context.stroke();