Canvas绘图(一)

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

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

一、矩形

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

使用以上方法时，需要先设置好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 : 定义线的形状边框以及颜色和样式

例如 :

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()

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()

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