Canvas是HTML5中一个强大的功能，它允许你使用JavaScript在网页上绘制图形、图像、动画等。无论是简单的线条还是复杂的动画，Canvas都能轻松实现。本文将带你从零开始，绘制你的第一个图形。
了解Canvas
Canvas是一个矩形画布，你可以在这个画布上绘制各种图形。Canvas元素是一个<canvas>标签，它没有内容，只用于图形绘制。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
在上面的代码中，我们创建了一个宽200像素、高100像素的Canvas，并且给它添加了一个边框。
绘制线条
在Canvas上绘制线条，我们需要使用getContext('2d')方法来获取绘图上下文。然后使用beginPath()方法开始一个新的路径，使用moveTo()方法移动到起点，使用lineTo()方法绘制线条。
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
在上面的代码中，我们绘制了一条从左上角到右下角的线条。
绘制矩形
绘制矩形需要使用rect()方法。这个方法需要四个参数：矩形的x坐标、y坐标、宽度和高度。
ctx.beginPath();
ctx.rect(50, 50, 100, 50);
ctx.stroke();
在上面的代码中，我们绘制了一个宽100像素、高50像素的矩形。
绘制圆形
绘制圆形需要使用arc()方法。这个方法需要五个参数：圆心的x坐标、y坐标、半径、起始角度、结束角度和顺时针或逆时针方向。
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
在上面的代码中，我们绘制了一个半径为50像素的圆形。
绘制文本
绘制文本需要使用fillText()或strokeText()方法。这两个方法都需要四个参数：要绘制的文本、x坐标、y坐标和可选的最大宽度。
ctx.fillText('Hello, Canvas!', 50, 50);
在上面的代码中，我们在Canvas上绘制了文本“Hello, Canvas!”。
总结
通过本文的学习，你现在已经可以绘制你的第一个图形了。Canvas是一个非常强大的工具，可以用于创建各种图形和动画。希望你能继续学习，探索Canvas的更多功能。