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();
以上代码绘制出如下：
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
