canvas学习笔记

Posted 2020-10-14 博客-崔

canvas是html5的新标签，一般称为“画布”，通过js代码在这个“画布”上制作各种各样的图形、绚丽的效果等等。现在开始一步一步了解canvas：

首先，需要在html中添加一个<canvas id = ‘firstCanvas‘></canvas>,一般来说，我们可以在canvas标签内添加其他元素，对于不兼容canvas的浏览器，就会把canvas标签内当元素呈现出来，而兼容的浏览器，则会忽略canvas标签内部的元素。在这里需要说明一下，canvas标签可以设置宽高，但它是inline标签！！！

好了，现在页面上就存在一个默认宽高但canvas元素了（300*150），那该怎么操作canvas绘图呢？刚才已经说过，这个“画布”是通过js来控制的，包括里面的图形、动画等等，那下一步就需要获取了：

var firstCan = document.getElementById(‘firstCanvas‘);现在拿到这个元素了,打印出来就是canvas这个标签，那我们还需要获取“画布”：var ctx = firstCan.getContext(‘2d‘)，以后的操作都是在 ctx 这个canvas对象上面。比如设置宽高（也可以直接在html中设置），ctx.widht = 500;ctx.height = 500;这就设置了一个500*500的画布，最基本的，来画条直线：

ctx.moveTo(100,100);          moveTo --> 相当于从新下笔的位置

ctx.lineTo(200,200);　　　　lineTo --> 相当于笔运行的目标位置（直线）

ctx.stroke();　　　　storke --> 前面相当于规划路线，这个相当于“画”的动作的执行。

通过这简单的3步，就画出了一条直线，起点位置在（100，100）位置，在平面上确定一个点的位置，就是通过横坐标和纵坐标来确定，在canvas画布上，画布的左上角是坐标轴的（0，0）位置，第一个是X的值，第二个是Y的值，向右（下）为正，上面写的，就是起点在（100，100）位置，终点在（200，200）位置。打开浏览器，会看到一个黑色的线，这是因为没有设置线条颜色，就是没有选择用什么颜色的笔去画，默认是黑色，那下面通过：ctx.strokeStyle = ‘color‘;设置颜色，color可以是red……、#111……、rgba（）这些写法都支持。当然颜色设置需要在stroke绘制之前。那下面，可以画一个封闭的图形：

ctx.moveTo(100,100);

ctx.lineTo(100,200);

ctx.lineTo(200,200);

ctx.closePath();　　　　closePath() --> 它的意思是使图形封闭起来，这里可以替换成 ctx.lineTo(100,100),效果是一样的。

ctx.strokeStyle = ‘red‘;

ctx.stroke();

好了，这就绘制出一个三角形，stroke只是绘制一条线，还有一个方法:fill();是填充颜色，默认也是黑色，通过fillStyle设置填充色。只要知道坐标点，就可以通过moveTo和lineTo就可绘制各种由直线组成的图形（圆形、贝塞尔曲线等复杂图形另算），比如长方形：

ctx.moveTo(100,100);

ctx.lineTo(300,100);

ctx.lineTo(300,200);

ctx.lineTo(100,200);

ctx.closePath();

ctx.fillStyle = ‘#26d‘;

ctx.strokeStyle = ‘red‘

ctx.fill();　　　　不管是填充还是画线，都需要在后面执行fill()或者stroke(),这些方法就是最会的“画”，之前的可以看作是“构思”

ctx.stroke();

这就绘制成一个200*100的长方形，canvas为我们提供一个简单的方法实现长方形：

ctx.rect(startX,startY,endX,endY);ctx.stroke();这样就绘制了一个简单的长方形，也可以通过上面提到的fillStyle来改变填充颜色、strokeStyle来改变边框颜色。也可以直接通过这些方法直接绘制有填充的长方形、直接线条绘制长方形，不用在后面加上stroke()：

ctx.fillRect(startX,startY,endX,endY);这句话就可以代替上面的好几行代码，这是填充一个长方形，还有一个就是线条描绘一个长方形：ctx.strokeRect(startX,startY,endX,endY)，同样的，默认都是黑色。

接下来，画一个圆形：

ctx.arc(centerX,centerY,radius,startAngle,endAngule,anticlockwise);centerX\Y,是所画圆形的中心点的坐标，radius是半径，startAngle\endAngle是弧度数（Math.PI)，（0-Math.PI*2)表示一个完整的圆，最后一个参数是Boolean值，来说明是顺时针方向还是逆时针方向（默认为顺时针）。

如果上面绘制的图形没有清除，图形会出现错乱，因为canvas只提供了“一支画笔”，当画完一个图形当时候，或者在开始画一个新的图形的时候，可以通过ctx.beginPath（）来告诉浏览器，这是从新开始画另一个图形了。

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

关于圆形（圆弧）的画法还有一个：arcTo(x1,y1,x2,y2,radius)，一般配合两条线来使用，是两点之间用弧线过度的效果。

最后再简单说一下贝塞尔曲线的画法，想要画出漂亮的贝塞尔曲线，需要合理的控制点的坐标：

二次贝塞尔曲线：需要配合一个起点坐标（moveTo）

ctx.quadraticCurveTo(cpX,cpY,endX,endY)，cpX\Y表示控制点的坐标，endX\Y表示贝塞尔曲线的终点，最后需要绘制（stroke）；

三次贝塞尔曲线：同样需要给一个起点坐标

ctx.bezierCurveTo(cpX1,cpY1,cpX2,cpY2,endX,endY)，前面四个参数分别代表两个控制点的坐标，endX\Y表示终点坐标，最后需要绘制（stroke）；

我们在绘制出来的封闭的图形上，还可以‘分割’出一个区域或多个区域：clip()，它也需要配合fillStyle和fillRect这类的函数。后面还有一些绘制方法，下次在记录。