w3cschool菜鸟教程canvas

Canvas是HTML5中新增的一个标签，用于在网页上绘制图形、动画等。它提供了一组绘图API，允许我们通过JavaScript在画布上绘制2D和3D图形。本文将详细介绍Canvas的使用方法，并给出一些案例说明。

一、Canvas标签的基本用法

Canvas标签是一种容器标签，用于将绘图API集成到网页中。可以通过以下代码创建一个Canvas标签：

```

```

我们可以给Canvas标签设置id属性，方便后续通过JavaScript获取该标签对象。

要在Canvas上绘制图形，我们需要获取该Canvas的上下文（context），通过context对象的方法来进行绘制操作。获取context的代码如下：

```

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

```

二、Canvas绘制基本图形

1. 绘制线段

Canvas提供了绘制直线的方法lineTo(x, y)和moveTo(x, y)。示例代码如下：

```

context.moveTo(0, 0); // 设置起点

context.lineTo(200, 200); // 绘制直线

context.stroke(); // 绘制

```

2. 绘制矩形

Canvas可以通过rect(x, y, width, height)方法绘制矩形。示例代码如下：

```

context.fillStyle = "green"; // 设置填充颜色

context.fillRect(50, 50, 200, 100); // 绘制填充矩形

context.strokeStyle = "red"; // 设置描边颜色

context.strokeRect(50, 50, 200, 100); // 绘制描边矩形

```

3. 绘制圆形

Canvas提供了绘制圆形的方法arc(x, y, radius, startAngle, endAngle, anticlockwise)。示例代码如下：

```

context.beginPath(); // 开始绘制路径

context.arc(100, 100, 50, 0, 2 * Math.PI, false); // 绘制圆形

context.closePath(); // 结束绘制路径

context.fillStyle = "blue"; // 设置填充颜色

context.fill(); // 填充颜色

context.strokeStyle = "red"; // 设置描边颜色

context.stroke(); // 绘制描边

```

三、Canvas绘制高级图形

1. 绘制曲线

Canvas提供了绘制贝塞尔曲线的方法bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)。示例代码如下：

```

context.beginPath();

context.moveTo(0, 100); // 设置起点

context.bezierCurveTo(50, 50, 150, 150, 200, 100); // 绘制贝塞尔曲线

context.stroke();

```

2. 绘制文本

Canvas可以通过fillText(text, x, y)方法在画布上绘制文本。示例代码如下：

```

context.font = "30px Arial"; // 设置字体大小和字体

context.fillStyle = "red"; // 设置填充颜色

context.fillText("Hello, World!", 100, 100); // 绘制文本

```

3. 绘制图像

Canvas可以通过drawImage(img, x, y, width, height)方法绘制图像。示例代码如下：

```

var img = new Image();

img.src = "image.jpg";

img.onload = function () {

context.drawImage(img, 100, 100, 200, 200);

}

```

加载一张图片后，通过drawImage方法在Canvas上绘制它。

四、Canvas动画效果

通过不断绘制不同状态的图形，可以实现Canvas的动画效果。示例代码如下：

```

function draw() {

context.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

// 绘制图形

// ...

requestAnimationFrame(draw); // 通过递归调用不断刷新画面

}

draw();

```

在draw函数里，我们每次绘制图形之前都调用了clearRect方法，用于清除之前绘制的图形。然后在每次绘制完图形后，通过requestAnimationFrame方法来请求浏览器刷新画面。

五、Canvas案例说明

1. 绘制时钟

通过Canvas可以绘制一个实时更新的时钟，示例代码如下：

```

function drawClock() {

// 绘制表盘

// ...

// 绘制时针、分针和秒针

// ...

setTimeout(drawClock, 1000); // 每秒更新一次

}

drawClock();

```

2. 绘制游戏地图

Canvas可以绘制游戏地图，并且实时更新玩家的位置和状态，示例代码如下：

```

function drawMap() {

// 绘制地图

// ...

// 绘制玩家

// ...

// 实时更新玩家位置和状态

// ...

requestAnimationFrame(drawMap);

}

drawMap();

```

以上是Canvas的基本用法、绘制基本图形、绘制高级图形、动画效果以及案例说明。通过Canvas，我们可以在网页上实现各种炫酷的图形和动画效果，为用户带来更好的视觉体验。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/