CanvasRenderingContext2D

渐变和图案

以下相关绘制方法。

• createLinearGradient()

创建一个沿着参数坐标指定的线的线性渐变。

该方法返回一个线性 CanvasGradient对象。想要应用这个渐变，需要把这个返回值赋值给 fillStyle 或者 strokeStyle。

CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);

createLinearGradient() 方法需要指定四个参数，分别表示渐变线段的开始和结束点。

参数：

x0：起点的x轴坐标。

y0：起点的y轴坐标。

x1：终点的x轴坐标。

y1：终点的y轴坐标。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");


const gradient = ctx.createLinearGradient(20, 0, 220, 0);

//添加三个颜色
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "cyan");
gradient.addColorStop(1, "green");

// 设置当前填充色，并画出矩形。
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);

以上代码，使用createLinearGradient() 方法初始化了一个线性渐变。在这个线性渐变中添加了三种色彩。最后，这个渐变被赋值给上下文对应的属性，实现了对矩形的填充。

如下图。

• createRadialGradient()

创建一个沿着参数坐标指定的线的放射性性渐变。

根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 CanvasGradient。

CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

参数：

x0：开始圆形的x轴坐标。

y0：开始圆形的y轴坐标。

r0：开始圆形的半径。

x1：结束圆形的x轴坐标。

y1：结束圆形的y轴坐标。

r1：结束圆形的半径。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// Add three color stops
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);

创建一个指定了开始和结束圆的 CanvasGradient 对象。一旦创建，你可以使用 CanvasGradient.addColorStop() 方法根据指定的偏移和颜色定义一个新的终止。你可以将当前的fillStyle设置成此渐变，当使用fillRect() 方法时，会在 canvas 上绘制出效果，如示例所示

阴影相关属性

• shadowBlur：描述模糊效果。默认 0。注意：只有设置 shadowColor 属性值为不透明，阴影才会被绘制。
• shadowColor：阴影的颜色。默认 fully-transparent black。注意：shadowColor 属性设置成不透明的，并且 shadowBlur、 shadowOffsetX 或者 shadowOffsetY属性不为 0，阴影才会被绘制。
• shadowOffseX：阴影水平方向的偏移量。默认 0。设置阴影的水平偏移量。注意：将 shadowColor 属性设置成不透明，阴影才会被绘制。
• shadowOffsetY：阴影垂直方向的偏移量。默认 0。注意：将 shadowColor 属性设置成不透明，阴影才会被绘制。

线条路径

以下方法操作对象的路径。

• beginPath()：清空子路径列表开始一个新的路径。当你想创建一个新的路径时，调用此方法。
• closePath()：使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。
• moveTo()：将一个新的子路径的起始点移动到 (x，y) 坐标。
• lineTo()：使用直线连接子路径的最后的点到 x,y 坐标。
• bezierCurveTo()：添加一个 3 次贝赛尔曲线路径。该方法需要三个点。第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。
• quadraticCurveTo()：添加一个 2 次贝赛尔曲线路径。
• arc()：绘制一段圆弧路径，圆弧路径的圆心在  (x, y)  位置，半径为 r，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。
• arcTo()：根据控制点和半径绘制圆弧路径，使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。
• rect()：创建一个矩形路径，矩形的起点位置是  (x, y) ，尺寸为 width 和 height。
• ellipse()：添加一个椭圆路径，椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY，按照anticlockwise （默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束。该方法后期可能会变更。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();

以上代码，是开始新的路径，然后设置线条色，新的路径起点移到（20，20），然后连接子路径到最后的点（200，20）。最后。画出实线。接着开始第二个子路径，一样的绘制。

bezierCurveTo()

void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

前面四个参数分别是第一个控制点的x,y轴坐标，第二个控制点的x,y轴坐标。最后两个参数是结束点的x,y轴坐标。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50,20);
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx.stroke();

ctx.fillStyle = 'blue';
// start point
ctx.fillRect(50, 20, 10, 10);
// end point
ctx.fillRect(50, 100, 10, 10);

ctx.fillStyle = 'red';
// control point one
ctx.fillRect(230, 30, 10, 10);
// control point two
ctx.fillRect(150, 70, 10, 10);

以上是一段绘制贝赛尔曲线的简单的代码片段。控制点是红色的，开始和结束点是蓝色的。如下图：

quadraticCurveTo()

二次贝塞尔曲线路径的方法。它需要 2 个点。第一个点是控制点，第二个点是终点。起始点是当前路径最新的点，当创建二次贝赛尔曲线之前，可以使用 moveTo() 方法进行改变。

void ctx.quadraticCurveTo(cpx, cpy, x, y);

前面两个参数分别是控制点的x,y轴坐标。最后两个参数是结束点的x,y轴坐标。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// Start and end points
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // Start point
ctx.arc(50, 100, 5, 0, 2 * Math.PI);  // End point
ctx.fill();

// Control point
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();

这是一段绘制二次贝赛尔曲线的简单的代码片段。控制点是红色，起点和终点是蓝色。 如下图：

arc()

绘制圆弧路径的方法。圆弧路径的圆心在  (x, y)  位置，半径为 r，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

参数如下：

• x

  圆弧中心（圆心）的 x 轴坐标。

• y

  圆弧中心（圆心）的 y 轴坐标。

• radius

  圆弧的半径。

• startAngle

  圆弧的起始点，x 轴方向开始计算，单位以弧度表示。

• endAngle

  圆弧的终点，单位以弧度表示。

• anticlockwise 可选

  可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

以上代码就是简单的画圆。

arcTo()

根据控制点和半径绘制圆弧路径，使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。

void ctx.arcTo(x1, y1, x2, y2, radius);

参数：

• x1

  第一个控制点的 x 轴坐标。

• y1

  第一个控制点的 y 轴坐标。

• x2

  第二个控制点的 x 轴坐标。

• y2

  第二个控制点的 y 轴坐标。

• radius

  圆弧的半径。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.setLineDash([])
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.arcTo(150,100,50,20,30);
ctx.stroke();

ctx.fillStyle = 'blue';
// base point
ctx.fillRect(150, 20, 10, 10);

ctx.fillStyle = 'red';
// control point one
ctx.fillRect(150, 100, 10, 10);
// control point two
ctx.fillRect(50, 20, 10, 10);
//
ctx.setLineDash([5,5])
ctx.moveTo(150, 20);
ctx.lineTo(150,100);
ctx.lineTo(50, 20);
ctx.stroke();
ctx.beginPath();
ctx.arc(120,38,30,0,2*Math.PI);
ctx.stroke();

以上是一段绘制圆弧的简单的代码片段。基础点是蓝色的，两个控制点是红色的。

结果如图所示：

rect() （后期可能更改）

创建矩形路径的方法，矩形的起点位置是  (x, y) ，尺寸为 width 和 height。矩形的 4 个点通过直线连接，子路径做为闭合的标记，所以你可以填充或者描边矩形。

void ctx.rect(x, y, width, height);

• x

  矩形起点的 x 轴坐标。

• y

  矩形起点的 y 轴坐标。

• width

  矩形的宽度。

• height

  矩形的高度。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 20, 150, 100);
ctx.fill();

使用 rect 方法创建一条路径。实际上，在 canvas 中绘制矩形路径，你可以使用 fill() 或者 stroke() 方法。参见 fillRect() 和strokeRect() 方法，只需一步即可绘制。 如下图：

ellipse()

添加椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY，按照anticlockwise（默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束。

void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

参数：

• x

  椭圆圆心的 x 轴坐标。

• y

  椭圆圆心的 y 轴坐标。

• radiusX

  椭圆长轴的半径。

• radiusY

  椭圆短轴的半径。

• rotation

  椭圆的旋转角度，以弧度表示 (非角度度数)。

• startAngle

  将要绘制的起始点角度，从 x 轴测量，以弧度表示 (非角度度数)。

• endAngle

  椭圆将要绘制的结束点角度，以弧度表示 (非角度度数)。

• anticlockwise 可选

  Boolean选项，如果为 true，逆时针方向绘制椭圆（逆时针），反之顺时针方向绘制。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Draw the ellipse
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();

// Draw the ellipse's line of reflection
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();

以上代码绘制出如下：