HTML5:Canvas 标签
HTML5 <canvas>
标签用于创建图形,它是一个可以由JavaScript脚本编程绘制图形的位图区域。
基本的 <canvas>
标签定义:
<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持Canvas标签。
</canvas>
在这个例子中,<canvas>
标签有一个 id
属性,这样可以通过JavaScript找到这个特定的元素。width
和 height
属性定义了画布的尺寸。如果浏览器不支持 <canvas>
标签,它会显示 <canvas>
标签中的文本。
下面是一个简单的JavaScript示例,它在 <canvas>
元素上绘制一个红色矩形:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
你的浏览器不支持Canvas标签。
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 设置填充颜色为红色
ctx.fillStyle = '#FF0000';
// 创建一个填充矩形
ctx.fillRect(0, 0, 150, 70);
</script>
</body>
</html>
在这个例子中,document.getElementById('myCanvas')
获取 <canvas>
元素,然后 getContext('2d')
方法获取2D渲染上下文。fillStyle
属性设置为红色(#FF0000),然后 fillRect
方法绘制一个填充的矩形。
评论已关闭