canvas笔记二---图形绘制

二、Canvas的绘制功能

1、填充矩形

// 设置颜色 注：先设置颜色后绘制
ctx.fillStyle = ‘green’
// 填充矩形 参数含义： 坐标x,坐标y,矩形width,矩形height
ctx.fillRect(100,100,100,100)

2、绘制矩形边框

// 设置边框颜色
ctx.strokeStyle = ‘red’
// 绘制矩形边框 参数含义： 坐标x,坐标y,边框width,边框height
ctx.strokeRect(300,100,100,100)

绘制矩形边框，和填充不同，绘制使用strokeRect，填充使用fillRect

清屏使用

ctx.clearRect(x,y,width,height) // 坐标x,坐标y,清除width,清除height

2、绘制路径

绘制路径作用是为了设置一个不规则的多边形

路径都是闭合的，使用路径进行绘制的时候需要以下步骤
1、设置路径的起点
2、使用绘制命令画出路径
3、封闭路径
4、填充、绘制已经封闭路径的形状

let canvas = document.getElementById("mycanvas")
// 通过画布对象得到上下文，上下文分为2d和3d
// 所有的图像绘制都是通过ctx的属性或方法来绘制的，和canvas标签无关了
let ctx = canvas.getContext("2d")
// 创建一个路径
ctx.beginPath()
// 移动绘制点
ctx.moveTo(100,100)
// 描述行进路径
ctx.lineTo(200,50)
ctx.lineTo(50,300)
// 封闭路径
ctx.closePath()
// 绘制这个不规则图形
ctx.strokeStyle = "red"
// 绘制
ctx.stroke()
// 填充
// ctx.fill()

绘制路径要按照顺序

移动笔触moveTo(x,y)
一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

线lineTo(x,y)
绘制一条从当前位置到指定x以及y位置的直线。

3、绘制三角形

调用beginPath()函数准备绘制一个新的形状路径开始。然后使用moveTo()函数移动到目标位置上。然后下面，两条线段绘制后构成三角形的两条边。

let canvas = document.getElementById("mycanvas")
// 通过画布对象得到上下文，上下文分为2d和3d
// 所有的图像绘制都是通过ctx的属性或方法来绘制的，和canvas标签无关了
let ctx = canvas.getContext("2d")
// 填充三角形
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(105, 25);
ctx.lineTo(25, 105);
ctx.fill();


// 描边三角形
ctx.beginPath();
ctx.moveTo(125, 125);
ctx.lineTo(125, 45);
ctx.lineTo(45, 125);
ctx.closePath();
ctx.stroke();

注：上述代码填充三角形是没有使用closePath方法，这是因为填充fill能够自动闭合，而绘制stroke无法自动闭合，如没有closePath则只会显示两条直线

4、圆弧

使用路径绘制圆弧或者圆，我们使用arc()方法
arc(x, y, radius, startAngle, endAngle, anticlockwise)
x坐标，y坐标，radius半径，startAngle开始弧度，endAngle结束弧度，anticlockwise布尔值默认顺时针false，逆时针true
弧度=(Math.PI/180)*角度。

arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

使用圆弧绘制笑脸

ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI * 2,true)
ctx.moveTo(110,75)
ctx.arc(75,75,35,0,Math.PI,false)
ctx.moveTo(65,65)
ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
ctx.stroke()

5、贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

下边的图能够很好的描述两者的关系，二次贝塞尔曲线有一个开始点（蓝色）、一个结束点（蓝色）以及一个控制点（红色），而三次贝塞尔曲线有两个控制点。
参数x、y在这两个方法中都是结束点坐标。cp1x,cp1y为坐标中的第一个控制点，cp2x,cp2y为坐标中的第二个控制点。

绘制贝塞尔曲线

ctx.beginPath();
ctx.moveTo(75,25)
ctx.quadraticCurveTo(25,25,25,62.5)
ctx.quadraticCurveTo(25,100,50,100)
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke()