Canvas 是 HTML5 中用于在网页上绘制图形的元素。本教程将带您入门，学习如何在网页中使用 Canvas 绘制各种图形。

基本概念

  • Canvas 元素：在 HTML 中，<canvas> 元素用于在网页上绘制图形。
  • JavaScript API：使用 JavaScript 的 Canvas API 可以在 Canvas 元素上绘制各种图形。

示例

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

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

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

图像绘制

您还可以使用 Canvas 绘制图像。以下是一个示例：

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};
img.src = "https://example.com/image.png";

扩展阅读

想了解更多关于 Canvas 的知识？请访问我们的 Canvas 教程 页面。

相关资源

[

canvas_drawing
]