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
描边线条粗细,默认单位pxlineCap
描边线条末端样式(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/endtextBaseline
指定文本基线
绘制文本有两个方法
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);