为什么在 HTML5 中使用画布标签?
指定画布的高度。HTML <canvas> 标签用于使用脚本绘制图形、动画等。<canvas> 标签在 HTML5 中引入。
让我们看一个简单的 <canvas> 元素,它具有宽度和高度这两个特定属性以及所有核心 HTML5 属性,例如 id、名称和类等。
<canvas id="myCanvas" width="100" height="100"></canvas>
以下是属性 -
属性 | 值 | 说明 |
height | pixels | 指定画布的高度。 |
width | pixels | Specifies width of the canvas. |
示例
你可以尝试运行以下代码来学习如何使用画布创建矩形。画布元素有一个称为 getContext 的 DOM 方法,它获取渲染上下文及其绘制函数。此函数采用一个参数,即上下文类型 2d。
<!DOCTYPE html> <html> <head> <title>HTML Canvas Tag</title> </head> <body> <canvas id = "myCanvas"></canvas> <script> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.fillStyle = '#7cce2b'; ctx.fillRect(0,0,300,100); </script> </body> </html>
广告