Canvas快速上手——轻松掌握画图技巧，尽情挥洒创意！

2023-10-16 22:33:21

在web前端开发中，canvas是一个非常重要的绘图工具，它允许我们使用JavaScript来绘制各种各样的图形和动画。canvas可以用来创建各种各样的视觉效果，如游戏、动画、图表和数据可视化。

一、canvas基础

canvas是一个HTML5元素，它本质上是一个矩形区域，我们可以通过JavaScript来绘制图形和动画。canvas的语法如下：

<canvas id="myCanvas" width="500" height="300"></canvas>

上面代码创建一个id为"myCanvas"的canvas元素，它的宽度为500像素，高度为300像素。

二、绘制线段

在canvas中绘制线段非常简单，我们可以使用moveTo()方法来设置线段的起点，然后使用lineTo()方法来设置线段的终点。最后，我们可以使用stroke()方法来绘制线段。

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

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 10);
ctx.stroke();

上面代码绘制了一条从(10, 10)到(200, 10)的线段。

三、绘制圆形

在canvas中绘制圆形也很简单，我们可以使用arc()方法来绘制圆形。arc()方法的语法如下：

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

x和y是圆心的坐标。
radius是圆的半径。
startAngle和endAngle是圆弧的起始角和结束角。
anticlockwise是一个布尔值，表示圆弧是顺时针方向还是逆时针方向绘制。

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

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

上面代码绘制了一个半径为50像素的圆形，圆心位于(100, 100)。

四、填充图形

在canvas中，我们可以使用fill()方法来填充图形。fill()方法的语法如下：

ctx.fill();

fill()方法会填充当前路径下的所有图形。

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

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

上面代码绘制了一个填充的圆形，圆心位于(100, 100)，半径为50像素。

五、渐变

在canvas中，我们可以使用createLinearGradient()方法来创建渐变。createLinearGradient()方法的语法如下：

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

x0和y0是渐变的起始点。
x1和y1是渐变的结束点。

var canvas = document.getElementById("myCanvas");
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(0, 0, 200, 100);

上面代码创建了一个从红色到蓝色的渐变，并用它来填充一个矩形。

六、图片

在canvas中，我们可以使用drawImage()方法来绘制图片。drawImage()方法的语法如下：

ctx.drawImage(image, x, y);

image是要绘制的图片对象。
x和y是图片的左上角坐标。

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

var image = new Image();
image.src = "myImage.png";

image.onload = function() {
  ctx.drawImage(image, 0, 0);
};

上面代码加载一张名为"myImage.png"的图片，并将其绘制到canvas中。

七、文字

在canvas中，我们可以使用fillText()方法来绘制文字。fillText()方法的语法如下：

ctx.fillText(text, x, y);

text是要绘制的文本。
x和y是文本的左上角坐标。

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

ctx.fillText("Hello World", 10, 50);

上面代码绘制了一段文本"Hello World"，文本的左上角坐标为(10, 50)。

八、动画

在canvas中，我们可以使用requestAnimationFrame()方法来创建动画。requestAnimationFrame()方法的语法如下：

requestAnimationFrame(callback);

callback是要执行的动画函数。

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

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制动画内容

  requestAnimationFrame(draw);
}

draw();