一、什么是canvas
<canvas>是一个可以使用脚本(通常为js)在其中绘制图形的html元素
两个属性：width和height 这两个属性是可选的
二、使用js来绘制图像
canvas坐标
二维网格：以左上角坐标为(0, 0)
了解了canvas坐标后，开始绘制图像，可以分三步：
1.找到canvas元素
2.创建context对象
<canvas> 元素有一个做getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。这里，我们采用CanvasRenderingContext2D
3.绘制你所需的图像
三、绘制矩形
HTML中的元素canvas只支持一种原生的图形绘制：矩形，所有其他的图形绘制都至少需要生成一条路径
canvas提供了三种方法绘制矩形：
绘制一个填充的矩形：
fillRect(x, y, width, height)
绘制一个矩形的边框
strokeRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明
clearRect(x, y, width, height)
参数
x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
width和height设置矩形的尺寸。
四、绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
1.需要创建路径起始点
2.使用画图命令去画出路径
3.把路径封闭
4.一旦路径生成，就能通过描边或填充路径区域来渲染图形
以下是所要用到的函数：
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
beginPath()
闭合路径之后图形绘制命令又重新指向到上下文中
closePath()
这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
通过线条来绘制图形轮廓
stroke()
通过填充路径的内容区域生成实心的图形
fill()
注意：当你调用fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
移动笔触
将笔触移动到指定的坐标x以及y上
moveTo(x, y)
绘制一条从当前位置到指定x以及y位置的直线
lineTo(x, y)
五、弧线
绘制圆弧或者圆，我们使用arc()方法
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束,参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
六、贝塞尔（bezier）以及二次贝塞尔
路径类型就是 贝塞尔曲线。二次以及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。
绘制二次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点。
quadraticCurveTo(cp1x, cp1y, x, y)
绘制三次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
七、矩形
rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
八、Path2D 对象
Path2D() Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。
网友评论