Canvas核心技术-如何绘制图形？一点都不难

2024-01-18 21:09:54

引言

在上一篇关于Canvas核心技术-如何绘制线段的文章中，我们学习了如何绘制线段。而通过许多线段的组合，我们便可以绘制出各种各样的图形，比如三角形、矩形、圆形等等。

绘制三角形

首先，我们来看看如何绘制一个三角形。三角形是由三条边组成，我们可以理解为三个线段组成。我们需要确定三角形的三个顶点的坐标位置，然后用线连接起来。

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

// 设置三角形的三个顶点的坐标
var x1 = 100;
var y1 = 100;
var x2 = 200;
var y2 = 200;
var x3 = 300;
var y3 = 100;

// 开始绘制路径
ctx.beginPath();

// 将路径移动到第一个顶点
ctx.moveTo(x1, y1);

// 将路径连接到第二个顶点
ctx.lineTo(x2, y2);

// 将路径连接到第三个顶点
ctx.lineTo(x3, y3);

// 闭合路径
ctx.closePath();

// 填充路径
ctx.fill();

// 描边路径
ctx.stroke();

绘制矩形

矩形是由四条边组成，我们可以理解为四个线段组成。我们需要确定矩形的左上角顶点和右下角顶点的坐标位置，然后用线连接起来。

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

// 设置矩形的左上角顶点和右下角顶点的坐标
var x = 100;
var y = 100;
var width = 200;
var height = 100;

// 开始绘制路径
ctx.beginPath();

// 将路径移动到矩形的左上角顶点
ctx.moveTo(x, y);

// 将路径连接到矩形的右上角顶点
ctx.lineTo(x + width, y);

// 将路径连接到矩形的右下角顶点
ctx.lineTo(x + width, y + height);

// 将路径连接到矩形的左下角顶点
ctx.lineTo(x, y + height);

// 闭合路径
ctx.closePath();

// 填充路径
ctx.fill();

// 描边路径
ctx.stroke();

绘制圆形

圆形是由无数条线段组成的，我们可以理解为一个闭合的路径。我们需要确定圆形的圆心和半径，然后使用路径命令来绘制圆形。

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

// 设置圆形的圆心和半径
var x = 100;
var y = 100;
var radius = 50;

// 开始绘制路径
ctx.beginPath();

// 将路径移动到圆形的圆心
ctx.moveTo(x, y);

// 将路径连接到圆形上的一个点
ctx.lineTo(x + radius, y);

// 使用弧形命令绘制圆形
ctx.arc(x, y, radius, 0, Math.PI * 2, false);

// 闭合路径
ctx.closePath();

// 填充路径
ctx.fill();

// 描边路径
ctx.stroke();

绘制其他图形

除了三角形、矩形和圆形之外，我们还可以使用Canvas来绘制其他图形，比如多边形、曲线、文字等。这些图形的绘制方法与三角形、矩形和圆形类似，都是通过路径命令来实现的。

填充和描边

我们可以使用fillStyle和strokeStyle属性来设置图形的填充颜色和描边颜色。fillStyle属性用于设置图形的填充颜色，strokeStyle属性用于设置图形的描边颜色。

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

// 设置图形的填充颜色
ctx.fillStyle = 'red';

// 设置图形的描边颜色
ctx.strokeStyle = 'blue';

// 绘制一个矩形
ctx.fillRect(100, 100, 200, 100);

// 绘制一个圆形
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
ctx.stroke();

渐变和图案

我们可以使用createLinearGradient()和createPattern()方法来创建渐变和图案。渐变是指颜色从一种颜色逐渐过渡到另一种颜色，图案是指重复出现的图像或纹理。

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

// 创建一个线性渐变
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

// 设置图形的填充颜色
ctx.fillStyle = gradient;

// 绘制一个矩形
ctx.fillRect(100, 100, 200, 100);

// 创建一个图案
var pattern = ctx.createPattern(image, 'repeat');

// 设置图形的填充颜色
ctx.fillStyle = pattern;

// 绘制一个圆形
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();