1.canvas 画布
<canvas> 看起来和 <img> 标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。如果不给 <canvas> 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 <canvas> 的宽高。
var canvas = document.getElementById('id');
var ctx = canvas.getContext('2d');
监测支持性
if (canvas.getContext)
{
var ctx = canvas.getContext('2d'); // drawing code here
}
else
{
// canvas-unsupported code here
}
2.绘制矩形
canvas只支持一种原生的图形绘制：矩形，所有其他图形都至少需要生成一种路径（path），我们拥有众多路径生成的方法，让绘制复杂的图形成为了可能
canvas提供了三种方法绘制矩形
（1）。fileRect(x,y,width,height):绘制一个填充矩形
（2）。strokeRect(x,y,width,height):绘制一个矩形的边框
（3）。clearRect(x,y,width,height):清除指定的矩形区域，然后这块区域就会变得完全透明。
参数说明：x,y:指的是矩形左上角的坐标，相对于canvas的最高点。
width,height:指的是绘制的矩形的宽和高
3.绘制路径 （path）
图形的基本元素是路径 。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，或者一个子路径，都是闭合的。
使用路径绘制图形需要额外的一些步骤：
（1）.创建路径起始点
（2）.调用绘制方法去绘制路径
（3）.把路径封闭
（4）.一旦路径生成，通过描边或者填充路径区域来渲染图形
方法：
（1）。beginPath()
新建一条路径，路径一旦创建成功，图形绘制命令会被指向到路径上生成路径
（2）。moveTo（x,y）
把 画笔移动到指定坐标x,y,相当于设置路径的起始点坐标
（3）。closePath()
闭合路径之后，图形绘制命令有重新指向到上下文中
（4）。stroke()
通过线条来绘制图形轮廓
（5）。fill()
通过填充路径的内容区域来生成实心的图形
4.绘制圆弧
有两个方法可以绘制圆弧
（1）。arc(x,y,r,startAngle,endAngle,anticlockwise):以（x,y）为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针(默认是顺时针)。注意：这里的度数都是弧度，0弧度是指x轴正方形
randians = (Math.PI/180)*degrees //角度转换成弧度的方法
（2）。arcTo(x1,y1,x2,y2,radius):根据给定的控制点和半径画一段圆弧 ，最后再以直线控制这两个控制点
5.贝塞尔曲线
绘制二次贝塞尔曲线
quadraticCurveTo(cplx,cply,x,y);
参数1和2：控制点坐标
参数3和4：结束点坐标
6.添加样式和颜色
（1）fileStyle = color 设置图形的填充颜色
（2）strokeStyle = color 设置图形轮廓的颜色
网友评论