基本用法
canvas 标签只有 2 个属性,宽度和高度,在没设置宽度高度时,初始化宽度为 300 和 150 像素,
该元素可以使用 CSS 来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果 CSS 的尺寸与初始画布的比例不一致,它会出现扭曲.
canvas 元素默认是空白的,为了使用 canvas 需要找到渲染上下文,然后进行绘制它有一个 getcontext()
方法.通过这个方法获得渲染上下文进行绘画
使用 canvas 来绘制图形
绘制矩形
fillRect(x,y,width,height)
绘制一个填充的矩形strokeRect(x,y,width,height)
绘制一个矩形边框clearRect(x,y,width,height)
清除指定矩形区域,让清除部分完全透明。
矩形例子
1 | var canvas = document.getElementById("canvas"); |
绘制路线
图形的基本元素是路径,路径通过不同颜色和宽度的线段或曲线连接形成不同的形状的集合
一个路径,甚至一个子路径,都是闭合的。使用路径绘制图形需要一些额外的步骤。
- 创建路径起始点
- 使用画图命令去画出路径。
- 路径封闭
- 通过描边或填充路径区域来渲染图形。
beginPath()
新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。stroke()
以线条形式绘制fill()
填充路径绘制
当前路径为空,即调用 beginPath()之后,或者 canvas 刚建的时候,第一条路径构造命令通常被视为是 moveTo(),无论实际上是什么。出于这个原因,你几乎总是要在设置路径之后专门指定你的起始位置。
闭合路径 closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的,即当前点为开始点,该函数什么也不做。
当你调用 fill()函数时,所有没有闭合的形状都会自动闭合,所以你不需要调用 closePath()函数。但是调用 stroke()时不会自动闭合。
moveTo(x,y)
将笔触移动到指定的坐标 x 以及 y 上。(定义路径起点)
当 canvas 初始化或者 beginPath()调用后,你通常会使用 moveTo()函数设置起点。我们也能够使用 moveTo()绘制一些不连续的路径。看一下下面的笑脸例子。我将用到 moveTo()方法(红线处)的地方标记了。lineTo(x, y)
绘制一条从当前位置到指定 x 以及 y 位置的直线。
该方法有两个参数:x 以及 y ,代表坐标系中直线结束的点。开始点和之前的绘制路径有关,之前路径的结束点就是接下来的开始点,开始点也可以通过 moveTo()函数改变。arc(x,y,radius,startAngle,endAngle,anticlockwise)
画一个以(x,y)为圆心的以 radius 为半径的圆弧(圆),从 startAngle 开始到 endAngle 结束,按照 anticlockwise 给定的方向(默认为顺时针)来生成。arcTo(x1, y1, x2, y2, radius)
据给定的控制点和半径画一段圆弧,再以直线连接两个控制点。
arc 方法,该方法有六个参数:x,y 为绘制圆弧所在圆上的圆心坐标。radius 为半径。startAngle 以及 endAngle 参数用弧度定义了开始以及结束的弧度。这些都是以 x 轴为基准。参数 anticlockwise 为一个布尔值。为 true 时,是逆时针方向,否则顺时针方向。
arc()函数中表示角的单位是弧度,不是角度。角度与弧度的 js 表达式:弧度=(Math.PI/180)*角度。
1 | var canvas = document.getElementById("canvas"); |
贝塞尔曲线绘制
贝塞尔曲线一般用来绘制复杂有规律的图形。quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线,cp1x,cp1y 为一个控制点,x,y 为结束点。bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线,cp1x,cp1y 为控制点一,cp2x,cp2y 为控制点二,x,y 为结束点。
二次贝塞尔曲线有一个开始点(蓝色)、一个结束点(蓝色)以及一个控制点(红色),而三次贝塞尔曲线有两个控制点。
参数 x、y 在这两个方法中都是结束点坐标。cp1x,cp1y 为坐标中的第一个控制点,cp2x,cp2y 为坐标中的第二个控制点。
1 | var canvas = document.getElementById("canvas"); |