特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
到今天这节是有关于在Canvas中绘制图形部分的最后一篇文章。从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D
对象中的属性和方法,我们可以很轻松的绘制出一些基本图形,比如直线、弧线、矩形、圆形、三角形等。但有很多基本图形的绘制是没有现成的方法,需要通过CanvasRenderingContext2D
对象中的属性和方法组合在一起才能绘制出来,比如说点划线、箭头和正多边形等。为了更好的帮助大家在Canvas中绘制这些基本图形,可以将这些基本图形的绘制封装起来。今天这篇文章,我们主要来看看怎么将这些函数封装。
回忆前面的内容
Canvas学习系列到目前为止已整理的都是关于基本图形绘制相关的知识,主要涵盖:
- Canvas入门准备
- Canvas里的坐标系统
- Canvas坐标变换
- Canvas自定义的坐标变换
- Canvas绘制线段
- Canvas线型
- Canvas状态:
save()
和restore()
- Canvas绘制矩形
- Canvas绘制圆和圆弧
- Canvas绘制贝塞尔曲线
- Canvas绘制虚线和圆点线
- Canvas绘制箭头
- Canvas绘制正多边形
如果您和我一样初次接触Canvas,建议您先花一定的时间阅读上面这些文章,有助于您更好的理解下面的内容。
Canvas绘图相关属性和方法
<canvas>
元素有一个getContext()
方法,这个方法可以用来获取上下文和它的绘画功能。getContext()
只有一个参数,上下文的格式。我们目前学习的上下文环境都是一个2D环境,所以我们所说的也是对于2D图像而言。它具CanvasRenderingContext2D
对象。这个对象包括一些绘制图形方法和设置图形样式的属性。
状态
CanvasRenderingContext2D
渲染环境包含了多种绘图的样式状态(属性有线的样式、填充样式、阴影样式、文本样式等),其中该对象提供了两个方法,能帮助我们更好的使用好这些状态:
CanvasRenderingContext2D.save()
:使用栈保存当前的绘画样式状态,你可以使用CanvasRenderingContext2D.restore()
恢复任何改变CanvasRenderingContext2D.restore()
:恢复到最近的绘制样式状态,此状态是通过CanvasRenderingContext2D.save()
保存到”状态栈“中最新的元素
有关于这方面的详细介绍可以阅读Canvas状态:save()
和restore()
一文。
变换
CanvasRenderingContext2D
渲染背景中的对象会有一个当前的变换矩阵,一些方法可以对其进行控制。当创建当前的默认路径、绘制文本、图形等会应用此变换矩阵。
CanvasRenderingContext2D.rotate(rad)
:在变换矩阵中增加旋转,角度变量表示一个顺时针旋转角度,并且用弧度表示CanvasRenderingContext2D.scale(sx, sy)
:根据sx
水平方向和sy
垂直方向,为Canvas单位添加缩放变换CanvasRenderingContext2D.translate(dx,dy)
:通过在网格中移动Canvas和Canvas原点dx
水平方向、原点dy
垂直方向,添加平移变换CanvasRenderingContext2D.transform(a, b, c, d, e, f)
:使用方法参数描述的矩阵多次叠加当前的变换矩阵CanvasRenderingContext2D.setTransform(a, b, c, d, e, f)
:重新设置当前的变换为单位矩阵,并使用同样的变量调用CanvasRenderingContext2D.transform(a, b, c, d, e, f)
方法CanvasRenderingContext2D.resetTransform()
:使用单位矩阵重新设置当前的变换
有关于Canvas中的变换涉及到了Canvas的坐标系统相关知识,建议您阅读前面介绍的Canvas里的坐标系统、Canvas坐标变换和Canvas自定义的坐标变换三篇文章。
线型
CanvasRenderingContext2D
提供了相关的方法和属性控制如何在Cavnas画布中绘制线的样式风格:
CanvasRenderingContext2D.lineWidth
:线的宽度,默认值1.0
CanvasRenderingContext2D.lineCap
:线末端的类型。允许的值:butt
(默认值)、round
和square
CanvasRenderingContext2D.lineJoin
:定义两线相交拐点的类型。允许值:miter
(默认值)、round
和bevel
CanvasRenderingContext2D.miterLimit
:斜接面限制比例,默认10
有关于这几个属性的详细介绍,可以阅读Canvas绘制线段和Canvas线型。
填充和描边
填充和描边有对应的属性和方法。其中属性主要用于填充设计用于图形内部的颜色和样式,描边设计用于图形的边线;方法主要用于填充路径和描边路径:
CanvasRenderingContext2D.fillStyle
:图形内部的颜色和样式(填充),默认#000
CanvasRenderingContext2D.strokeStyle
:图形边线的颜色和样式(描边),默认#000
CanvasRenderingContext2D.fill()
:使用当前的样式填充子路径CanvasRenderingContext2D.stroke()
:使用当前的样式描边子路径
路径
Canvas的CanvasRenderingContext2D
对象中用于操作路径的方法主要有:
CanvasRenderingContext2D.beginPath()
:清空子路径列表开始一个新的路径。当你想创建一个新的路径时,调用此方法CanvasRenderingContext2D.closePath()
:使笔点返回到当前子路径的起始点。它尝试从当前点到起点绘制一条直线。如果图形已经是封装的或者只有一个点,那么此方法不会做任何操作CanvasRenderingContext2D.moveTo(x, y)
:将一个新的子路径的起始点移动到(x, y)
坐标CanvasRenderingContext2D.lineTo(x, y)
:使用直线连接子路径的最后的点到(x, y)
坐标CanvasRenderingContext2D.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
:添加一个三次贝塞尔曲线路径。该方法需要三个点。 第一、第二个点是控制点,第三个点是结束点。起始点是当前路径的最后一个点,绘制贝赛尔曲线前,可以通过调用moveTo()
进行修改CanvasRenderingContext2D.quadraticCurveTo(cpx, cpy, x, y)
:添加一个二次贝塞尔曲线路径CanvasRenderingContext2D.arc(x, y, r, startAngle, endAngle, [anticlockwise])
:绘制一段圆弧路径,圆弧路径的圆心在(x,y)
位置,圆弧的半径为r
,根据anticlockwise
指定圆弧的方向从startAngle
开始绘制,到endAngle
结束(也就是旋转方向,默认为顺时针)
如需转载,烦请注明出处:https://www.w3cplus.com/canvas/canvas-drawing-function.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!