JavaScript学习笔记（canvas绘图）

canvas绘图分为2d绘图和3d绘图(WebGL)，本篇主要梳理一下2d绘图相关的知识

1.canvas绘图依赖<canvas>标签作为画布

<canvas id="drawing" width=" 200" height="200">您的浏览器不支持canvas绘图功能</canvas> 

可以在元素上添加widht,height属性，也可以通过css添加样式
如果浏览去不支持canvas标签，就会显示标签里面的内容

2.要在canvas画布上绘图，首先要取得2d绘图上下文对象，通过调用getContext()方法，传入2d

var drawing = document.getElementById('drawing');
if(drawing.getContext){
	var context = drawing.getContext('2d');
}

先判断元素上是否有getContext方法，确定浏览器是否支持canvas绘图，因为有的浏览器不支持canvas标签会用其他标签代替，不会报错，所以要通过getContext方法判断

3.canvas2d绘图,就有两种绘图方式，描边(画线)和填充

绘制图形样式设置

• fillStyle 填充他图形颜色,支持css各种格式颜色值
• strokeStyle 描边线条颜色，支持css各种格式颜色值
• lineWidth 描边线条粗细，默认单位px
• lineCap描边线条末端样式（butt平头round圆头square方头）
• lineJoin描边线条连接处样式（round圆角bevel斜角平头miter直角斜接

绘制矩形
矩形是唯一可以直接绘制的图形（其他图形要先绘制路线，再绘制）

//绘制描边矩形
context.strokeStyle(color);
context.strokeRect(x,y,width,height);

//绘制填充矩形
context.fillStyle(color);
context.fillRect(x,y,width,height);

//剪切矩形区域
context.clearRect(x,y,width,height)

绘制路径

• 绘制前

绘制路径必须以beginPath()开头,表示要开始绘制

context.beginPath();

• 绘制中

绘制路径有以下用到的方法

• moveTo(x, y)将绘制起点移动到x,y位置
• lineTo(x，y)从上一个点绘制直线到x,y位置
• closePath()闭合路径
• arc(x, y, R, startAngle, endAngle, false)绘制圆弧
• rect(x,y,width,height)绘制就行

• 绘制结束

绘制路径结束可以进行以下几个操作

• stroke()对路径描边
• fill()对路径填充
• clip()对路径裁剪

//绘制圆
context.beginPath();
context.arc(110,200,50,0,2*Math.PI,false)
context.stroke();
//绘制矩形
context.beginPath();
context.rect(200,200,50,50)
context.stroke();

//绘制三角形
context.moveTo(10, 150);
context.lineTo(110,150);
context.lineTo(110,200);
context.closePath();

变换方法

• translate(x,y) 把原点设置到x,y位置
• rotate()旋转，传入弧度数
• scale(x,y)缩放

无论变换还是设置其他属性，都会在上下文中一直有效，如果只想在绘制某个图形时使用一组属性，canvas提供了save()和restore()方法，用于保存状态和状态回退，支持保存多个状态和多层回退

绘制文本
设置文本样式

• font(bold 10px Arial)设置文本格式
• textAlign()设置文本对齐方式 start/center/end
• textBaseline指定文本基线

绘制文本有两个方法

• fillText(text,x,y)绘制填充文本
• strokeText(text,x,y) 绘制描边文本

context.font = 'bold 20px Arial'//文本样式/大小/字体
context.align = 'center';//对齐方式
context.textBaseline = "middle";//文本基线
context.fillText("绘制的文本", 100, 300);
context.strokeText("绘制的文本", 200, 300);