Canvas 教程

Canvas 是一种用于在网页上绘制图形的强大工具。本教程将带你入门，了解如何在网页中使用 Canvas。

基本用法

创建 Canvas 元素：首先，你需要在 HTML 中创建一个 <canvas> 元素。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

获取 Canvas 上下文：使用 JavaScript 获取 <canvas> 元素的上下文。

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

绘制图形：使用上下文对象 ctx 来绘制图形。
```
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,100);
```

图形绘制

Canvas 支持多种图形绘制，包括：

线条：使用 lineTo() 和 moveTo() 方法绘制线条。
矩形：使用 fillRect() 和 strokeRect() 方法绘制矩形。
圆形：使用 arc() 方法绘制圆形。
文本：使用 fillText() 和 strokeText() 方法绘制文本。

示例

以下是一个简单的示例，展示了如何使用 Canvas 绘制一个矩形和一个圆形。

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

ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,100);

ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2 true);
ctx.fillStyle = "#0000FF";
ctx.fill();

扩展阅读

想要了解更多关于 Canvas 的知识，可以阅读以下文章：

希望这个教程能帮助你入门 Canvas！😊