HTML Canvas
提示
<canvas>
标签的作用:HTML中的<canvas>
标签用于创建图形,通常与JavaScript结合使用来在其内部绘制图形。- JavaScript与Canvas API的结合:通过JavaScript和Canvas API,可以在
<canvas>
元素内创建各种图形,例如示例中展示的圆形。 - 绘图方法和属性:使用
beginPath()
开始新路径,arc()
绘制圆形,fillStyle
设置填充颜色,以及fill()
完成填 充,共同实现了圆形的绘制。
HTML 的 <canvas>
标签用于在 HTML 中创建图形。我们使用 JavaScript 在 <canvas>
内部创建图形。例如,
<canvas
id="circle-canvas"
height="200"
width="200"
style="border: 1px solid;"
></canvas>
<script>
let canvas = document.getElementById("circle-canvas");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2 * Math.PI, false);
ctx.fillStyle = "blue";
ctx.fill();
</script>
浏览器输出
在这里,我们结合使用 JavaScript 和 Canvas API,在画布内部创建了一个圆形。这段代码在 HTML 页面的 canvas 元素中创建了一个简单的绘图。
这个画布的 id 为 circle-canvas
,尺寸为 200x200 像素。这样就在我们可以使用 JavaScript 进行绘图的表面上创建了一个画布。
我们使用了 canvas 元素的 getContext()
方法,并将其存储在 ctx
变量中。它允许我们访问绘图上下文并在画布上绘图。
在上面的例子中,
beginPath()
- 创建一个新路径,任何后续的路径命令都将从这一点开始arc()
- 绘制一个圆形,其中, 圆形以(100, 100)
为中心 圆形的半径为80
像素 圆形以逆时针方向绘制,从 0 弧度开始,到2*Math.PI
弧度结束fillStyle
- 设置圆形的填充颜色为蓝色fill()
- 用蓝色填充圆形