canvas

时间: 2023-08-03 13:22:11 浏览: 120

Canvas 是 HTML5 中新增的一个标签，它可以用来绘制图形，包括直线、矩形、圆形、文本等各种图形。使用 Canvas 可以在网页中实现动画效果、图表展示、图片处理等功能。Canvas 通过 JavaScript 代码来绘制图形，这意味着我们可以根据需要动态地生成图形，而不需要使用静态的图片。 Canvas 的使用非常灵活，可以在 HTML 页面中直接使用 `<canvas>` 标签，也可以通过 JavaScript 动态地创建 Canvas 元素。Canvas 提供了各种 API，可以用来绘制不同的图形，如绘制线条、矩形、圆形、文字等，同时也支持图形的变换、裁剪、合成等操作。以下是一个简单的 Canvas 示例代码，用来绘制一个红色的矩形： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas Demo</title> </head> <body> <canvas id="my-canvas" width="200" height="200"></canvas> <script> const canvas = document.getElementById('my-canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); </script> </body> </html> ``` 上面的代码中，我们首先使用 `<canvas>` 标签创建了一个宽度为 200 像素、高度为 200 像素的 Canvas 元素，然后通过 JavaScript 获取到了该元素，并获取了它的 2D 上下文对象，接着使用 `fillStyle` 属性设置了填充颜色为红色，最后使用 `fillRect()` 方法绘制了一个矩形。

阅读全文