愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

HTML5 Canvas使用总结

HTML5中的<canvas>标签,提供一个画布容器的功能,我们可以通过JS API来操作画布,绘制图形

使用canvas的步骤

1、首先,我们需要创建一个canvas标签,作为画布,如:

<canvas id="canvas" width="500" height="300"></canvas>

2、获取画布对象:

var canvas = document.getElementById('canvas');

3、使用canvas.getContext()获取上下文,绘制2D图形可以用2d库,而3d图形可以用webgl,如:

var ctx = canvas.getContext('2d');

然后,我们就可以操纵ctx对象,实现各种各样的绘制功能了


canvas中的坐标系

canvas中的坐标系,和数学上的有所不同,二维坐标系,以画布左上角为坐标原点(0, 0),x轴正方向为从原点指向右上角所在的方向,y轴正方形为从原点指向左下角所在的方向
(0, 0)
.------------------> x轴
|
|
|
|

y轴


指定填充样式

ctx.fillStyle主要用来指定填充的样式(颜色、渐变、pattern对象),

1、用颜色填充:ctx.fileStyle = "#36C"
2、用渐变填充:使用渐变填充,首先需要创建一个渐变对象,用于指定渐变的形式,然后将这个渐变对象赋给ctx.fillStyle

var gradient = ctx.createLinearGradient(startX, startY, endX, endY);
/*
如果要创建径向渐变,则可以使用:
gradient = ctx.createRadialGradient(startX, startY, startR, endX, endY, endR);
*/
// 可以用多个gradient.addColorStop来制定渐变颜色,参数1为0~1.0之间的数值
gradient.addColorStop(0, "#000");
gradient.addColorStop(1, "#FFF");
// 上面表示黑到白的渐变
ctx.fillStyle = gradient;

3、用pattern填充(类似于CSS中的background):

// repeatType: repeat、no-repeat、repeat-x、repeat-y
var pattern = ctx.createPattern(elementObject, repeatType);
ctx.fillStyle = pattern;

4、ctx.globalAlpha 指定透明度


阴影

1、ctx.shadowColor,设定阴影颜色
2、ctx.shadowBlur,设定阴影模糊级数
3、ctx.shadowOffsetX,设定阴影水平偏移量,ctx.shadowOffset设定阴影垂直偏移量


画笔

指定画笔颜色

ctx.fillStyle顾名思义是指定填充的样子,而我们绘制过程中并不是只有填充,还有画线条、画点
等等,这种情况下,就需要使用ctx.strokeStyle来指定画笔的样式

用法如:

ctx.strokeStyle = "#35C";
ctx.strokeRect(15, 15, 50, 50);
// 绘制线条颜色为#35C的矩形

和填充类似的是,我们也可以使用渐变画笔(使用gradient对象)、pattern画笔(pattern对象)

指定画笔(线条)样式

注意:以下的属性都是可读可写的

  • ctx.lineWidth 指定线条粗细
  • ctx.lineJoin 指定当两条线条橡胶的时候,汇合处的样式(可以是bevel斜角、round圆角、miter尖角)
  • ctx.lineCap,用于在线条的末端添加线帽(butt是默认样式,平直的边缘;round是添加圆角线帽、square是正方形线帽,但是round和square会使得线条略微拉长,而butt和square的区别也正在于此,表现一致,但是square略长)
  • ctx.miterLimit,用于设定两条线交汇处内角与外角之间的距离

路径

路径是最灵活的绘制线条的方式

1、ctx.beginPath() 用于开始一条路径,或者重置当前路径
2、ctx.moveTo(x, y) 把画笔移动画布中(x, y)的位置
3、ctx.lineTo(x, y) 指定路径中的一个点(最后stroke根据这些点绘制出路径)
4、ctx.quadraticCurveTo(cpx, cpy, x, y) 用于绘制二次贝塞尔曲线(cpx, cpy)为控制点的坐标,(x, y)为结束点的坐标,而起始点则由ctx.moveTo()指定

5、ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 绘制三次贝塞尔曲线,有两个控制点
6、ctx.arc(Ox, Oy, r, startAngle, endAngle, clockWise) (Ox, Oy)为圆心位置,r为半径,而startAngle、endAngle为开始角、结束角(弧度计),最后一个参数指定是否为逆时针
7、ctx.arcTo(startX, startY, endX, endY, r),绘制两个切线间的圆弧,(startX,startY)指定弧的起点坐标,(endX, endY)指定弧的终点坐标,r指定弧的半径
8、ctx.isPointInPath(x, y) 判断点(x, y)是否在当前路径中
9、ctx.closePath() 创建当前点到起始点的路径
10、ctx.clip() 从当前画布中剪切形状,并且将之后的画布范围限制在该剪切形状中
3、ctx.stroke() 用于把路径绘制出来(根据前面指定的参数、前面的设定来绘制)
4、填充路径,则用ctx.fill()


绘制矩形

1、使用ctx.fillRect(x, y, width, height)来绘制 可填充 矩形,调用完便直接绘制
2、使用ctx.rect(x, y, width, height)创建矩形(带边框的矩形,无填充),需要和ctx.stroke()方法一起使用,如果要一次性绘制出,则用ctx.strokeRect(x, y, w, h)
3、可以使用ctx.clearRect(x, y, width, height)在给定的矩形内清除像素(变透明),也就是相当于在一个给定的矩形的(x, y)位置开始挖去宽width,高height的矩形


文本

1、要添加一段文本,首先是设定文本的呈现形式,然后再用ctx.fillText()或者ctx.strokeText()来绘制文本,如:

ctx.fillText("TextContent", x, y);      // 绘制填充文本
ctx.strokeText("TextContent", x, y [, maxWidth]);    // 绘制非填充文本

2、使用ctx.font来设置字体的属性,如:ctx.font = "20px Arial,font属性值可以设定的很多,每个字体属性用空格隔开,可以有:

  • font-style(字体样式): normal | italic | oblique(强制斜体)
  • font-variant(字体变体): normal | small-caps(小写变大写)
  • font-weight(字体粗细): normal | bold | bolder | lighter | 100-900
  • font-size / line-height: 字号、行高(单位为px)
  • font-family
    3、使用ctx.textAlign来指定文本的对齐方式,它的值有:
  • start 文本在指定的位置(fillText或strokeText中的x、y)开始
  • end 文本在指定的位置结束
  • center 文本的中心在指定位置
  • left 文本左对齐
  • right 文本右对齐
    4、使用ctx.textBaseline指定绘制文本的基线,它的值图解为:

    5、使用ctx.measureText(text).width文本的宽

变换方法

注意:变化方法,不是在原来图形上操作的,而是创建了一个新的图形!
1、ctx.scale(scaleWidth, scaleHight),如ctx.scale(1.0, 0.5)
2、ctx.rotate(angle),旋转,单位为弧度
3、ctx.translate(x, y),平移
4、ctx.transform(a, b, c, d, e, f) 定义转换矩阵
[ a c e ]
[ b d f ]
[ 0 0 1 ]


其他操作

1、ctx.save() 保存canvas的状态(属性等)
2、ctx.restore() 恢复canvas的状态