2024-08-08发表2024-08-10更新软件开发 / HTML3 分钟读完 (大约517个字)0次访问

21 Canvas元素简介

<canvas> 元素是HTML5中一个非常强大的功能，它允许您在网页上绘制图形。通过JavaScript可以动态地在canvas上绘制图片、线条、形状和动画。

基本使用

创建一个Canvas

首先，在HTML文档中添加一个<canvas>元素：
1
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000;"></canvas>
在这个例子中，我们创建了一个宽500像素、高300像素的canvas，并给它加上了一个边框，以便我们能看到它的位置。
获取Canvas上下文

接下来，我们需要通过JavaScript获取canvas的上下文。在绘制图形之前，必须先获取这个上下文对象。通常我们使用绘制的“2D”上下文。
1
2
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

绘制图形

现在我们可以使用ctx对象来绘制图形了。以下是一些常见的绘图方法：

绘制矩形

1
2
3

// 填充一个矩形
ctx.fillStyle = "#FF0000"; // 设置填充颜色为红色
ctx.fillRect(20, 20, 150, 100); // 在(20,20)位置绘制宽150、高100的矩形

绘制圆形

ctx.beginPath(); // 开始路径
ctx.arc(240, 150, 40, 0, Math.PI * 2); // 绘制圆形
ctx.fillStyle = "green"; // 设置填充颜色为绿色
ctx.fill(); // 填充圆形

绘制线条

ctx.beginPath(); // 开始路径
ctx.moveTo(0, 0); // 移动到(0,0)
ctx.lineTo(200, 100); // 绘制到(200,100)
ctx.stroke(); // 描边

完整案例

下面是一个完整的HTML示例，将上述所有代码结合在一起：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 示例</title>
</head>
<body>

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

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

    // 绘制矩形
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 100);

    // 绘制圆形
    ctx.beginPath();
    ctx.arc(240, 150, 40, 0, Math.PI * 2);
    ctx.fillStyle = "green";
    ctx.fill();

    // 绘制线条
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
</script>

</body>
</html>