Canvas绘图(一)

HTML5 Canvas是使用强大的绘图、着色、基本二维形状变换为基础的，然后可供选择的内建形状不是很多，本章将学习以下技巧：

矩形
Canvas状态保留
使用路径绘制线段
圆弧

一、矩形

最原始的Canvas内建几何形状——矩形，绘制基本矩形有三种不同的方式

实现方式	接口	说明
填充	fillRect(x,y,width,height)	在位置(x,y)除以宽高width、heigth绘制一个填充的矩形
描边	strokeRect(x,y,width,height)	...绘制一个矩形边框，它需要使用当前strokeStyle、lineWidth、linJoin以及miterLimit设置
清除	clearRect(x,y,width,height)	...清除指定区域并使其完全透明(使用透明黑)

使用以上方法时，需要先设置好Canvas绘图所需要填充或描边的样式

fillStyle : 填充的颜色
strokeStyle : 描边的颜色

例如，绘制一个基本矩形 :

drawRectangle() {
    this.context.fillStyle = "#000000";
    this.context.strockStyle = "#66ccff";
    this.context.lineWidth = 2;
    this.context.fillRect(10, 10, 40, 40);
    this.context.strokeRect(0, 0, 60, 60);
    this.context.clearRect(20, 20, 20, 20);
}

image-20200925155234590.png

二、Canvas状态

在Canvas环境中绘图时，可以利用所谓的绘图堆栈状态。该堆栈状态随时存储上下文数据，下面是存储在状态堆栈中的数据列表

变化矩阵信息，例如旋转与平移使用的context.rotate方法和context.setTransfrom方法
当前的剪贴区域
画布属性的当前值

包括 :

globalAlpha
globalCommpositeOperation
strokeStyle
textAlign、textBaseline
lineCap、LineJoin、lineWidth、miterLimit
fillStyle
font
shadowBlur、shawdowColor、shadowOffsetX、shadowOffsetY

那有什么不属于状态的？

当前路径
当前位图

保存和恢复Canvas状态

// 保存当前状态到堆栈，调用下面函数
context.save() 
// 调出最后存储的堆栈恢复画布
context.restore()

三、使用路径绘制线段

路径可以用在画布上绘制任何形状，路径就是一系列的点和这些点之间的连线，Canvas环境只能有一个当前路径，当调用context.save()时，不会将它存储为当前绘图状态的一部分。我们需要熟悉以下方法

A. 设置路径的开始与结束

beginPath() : 开始一个路径
closePath() : 结束一个路径

B. 动态绘图

moveTo(x,y) : 将路径移动到位置(x,y)处
lineTo(x,y) : 从起点到目标位置(x,y)处连接一条线
stroke() : 画出构建的路径

另外我们需要熟悉以下属性 :

lineCap : 上下文中线的端点，可以有三个值。属性如下
lineJoin : 定义两条线相交的拐角，可以称为连接，在连接处创建一个填充三角形，可以使用lineJoin设置的属性。属性如下
lineWidth : 定义线宽
strokeStyle : 定义线的形状边框以及颜色和样式

属性	取值
lineCap	butt(默认) : 端点垂直于线段边缘的平直边缘 round:端点以线宽为半径的半圆 square : 端点是选段边缘处以线宽为长、以一半线宽为宽的矩形
lineJoin	miter : 默认值，在连接外边缘处延长详解，miterLimit是角长和线宽所允许的最大比例(默认10) bevel : 连接处是一个对角线斜角 round : 连接处是一个圆

例如 :

drawLine() {
    this.context.strokeStyle = "#000000";
    this.context.lineWidth = 10;
    this.context.lineCap = "square";
    this.context.beginPath();
    this.context.moveTo(20, 50);
    this.context.lineTo(100, 50);
    this.context.stroke();
    this.context.closePath();
}

image-20200925170351539.png

C. 绘制问题

在画布上绘制线段时，会有一些奇怪的现象发生例如：

 drawQuestion() { 
    // 实例1  : 圆形端点，斜角连接，在画布左上角
    this.context.strokeStyle = '#000000'
    this.context.lineWidth = 10 
    this.context.lineJoin = 'bevel' // 连接处是一个对角线斜角
    this.context.lineCap = 'round'  // 端点为圆角
    this.context.beginPath() 
    this.context.moveTo(0,0)
    this.context.lineTo(25,0)
    this.context.lineTo(25,25)
    this.context.stroke()
    this.context.closePath()

    // 实例2 : 圆形端点，斜角连接，不在画布左上角
    this.context.beginPath()
    this.context.moveTo(10,50)
    this.context.lineTo(35,50)
    this.context.lineTo(35,75)
    this.context.stroke() 
    this.context.closePath()

    // 实例3 : 平直端点，圆形连接，不在画布左上角
    this.context.lineJoin = 'round' // 连接处是一个圆
    this.context.lineCap = 'buff'  // 端点垂直于线段边缘的平直边缘
    this.context.beginPath()
    this.context.moveTo(10,100)
    this.context.lineTo(35,100)
    this.context.lineTo(35,125)
    this.context.stroke() 
    this.context.closePath()
  }

image-20200925172121820.png

你会发现有以下问题 :

第一个图形由于绘制起点在左上角，所以上面的线段绘制到了画布的外侧，由于这个原因，第一个例子上面看上去要比10像素要细
例子2调整了坐标，所以绘制的图形没有问题
例子3显示了默认端点的效果，并将连接处设置为圆角

四、高级路径

这一节讨论其他绘制路径的方法，例如弧线曲线、以及组合复杂的图像。

A. 弧线

有以下几种方式绘制弧线与曲线，弧线可以是一个整圆，也可使圆的一部分

a. context.arc()

接口	说明
context.arc (x,y,radius,startAngle,endAngle,anticlockwise)	x、y : 定义圆心位置 radius定义弧线半径 startAngle和endAngle使用弧度值而不是角度值。 anticlockwise的值可以为true或者false，用于定义弧线的方向

drawArc() {
    this.context.beginPath();
    this.context.strokeStyle = "black";
    this.context.lineWidth = 5;
    this.context.arc(
        100,
        100,
        20,
        (Math.PI / 180) * 0,    
        (Math.PI / 180) * 360,
        false
    );
    this.context.stroke()
    this.context.closePath()
}

image-20200927093441069.png

弧度 : 在数学和物理中，弧度是角的度量单位。他的单位缩写是rad。一周是360度，也就是2弧度

如果我们不以 0 和 360为起点与结束点，那么可以绘制一段圆弧，例如下面这段代码，按照顺时针画个圆。

    this.context.arc(
        100,
        100,
        20,
        (Math.PI / 180) * 0,    
        (Math.PI / 180) * 90,
        false
    );

image-20200927093851674.png

b. context.arcTo()

接口	说明
context.arcTo(x1,y1,x2,y2,radius)	以给定的半径绘制一条弧线，圆弧的起点与当前路径的位置到(x1,y1)直线相切，圆弧的终点与(x1,y1)到(x2,y2)的直线相切

drawArcTo() {
    this.context.beginPath();
    this.context.moveTo(100, 200);
    this.context.arcTo(350, 350, 100, 100, 20);
    this.context.stroke();
    this.context.closePath();
    this.context.fillRect(350, 350, 10, 10);
    this.context.fillRect(100, 100, 10, 10);
  }

微信图片_20200927102820.jpg

arcTo与acr虽然名字相似，但是入参却千差万别，arcTo(x1,y1,x2,y2,radius)，它的使用前提是当前路径至少有一个子路径，它的表现形式是从当前上下文坐标，到(x1,y1)位置连接(比喻)，然后再从(x1,y1)位置连接到(x2,y2)，这使得它们之间存在一个夹角，canvas根据半径在该夹角选择合适的位置绘制圆弧，并连接(x0,y0)与起点。当半径越大，圆弧的起点离(x0,y0)越近，当半径超过了一定大小，则会有以下表现。

this.context.arcTo(350, 350, 100, 100, 50);

image-20200927104112879.png

c. 贝塞尔曲线

贝塞尔曲线远比弧线灵活，他有立方和平方两种形式

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
context.quadraticCurveTo(cpx,cpy,x,y)

在二维空间中，贝塞尔曲线通过起点、终点以及两个决定曲线走向的控制点完成，而

立方贝塞尔曲线使用两个点
平方贝塞尔曲线使用一个点

以下使用平方贝塞尔曲线画一条弧线。

drawQuadraticCurveTo() {
    this.context.beginPath();
    this.context.moveTo(100, 100);
    this.context.quadraticCurveTo(100, 25, 20, 50);
    this.context.stroke();
    this.context.closePath();
    this.context.fillRect(100,25,10,10)
    this.context.fillRect(20,50,10,10)
    this.context.fillRect(100,100,10,10)
}

微信图片_20200927105716.jpg

这条弧线从(100,100)开始，到(20,50)结束，而(100,25)这个点是圆弧的圆心(即控制点)，它可以通过调整从而拉长或缩短圆弧。

以下使用立方贝塞尔曲线画一个S弧线

drawBezierCurveTo() {
    this.context.beginPath();
    this.context.moveTo(100, 100);
    this.context.bezierCurveTo(50, 150, 150, 250,100,300);
    this.context.stroke();
    this.context.closePath();
}

image-20200927111154367.png

二、Canvas基本绘图