【HTML5】 canvas 绘制图形
在HTML5中，使用<canvas>元素可以绘制图形。以下是一个简单的例子，展示了如何使用JavaScript在<canvas>元素中绘制一个红色的矩形：
HTML部分：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持Canvas。
</canvas>
<script>
// 在这里放置JavaScript代码
</script>
</body>
</html>JavaScript部分：
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
// 创建context对象
var ctx = canvas.getContext('2d');
// 设置填充颜色为红色
ctx.fillStyle = '#FF0000';
// 绘制矩形
ctx.fillRect(0, 0, 200, 100);在这个例子中，我们首先通过document.getElementById获取了canvas元素。然后，我们通过调用getContext('2d')方法创建了一个2D绘图上下文。接着，我们设置了填充颜色为红色（使用十六进制颜色代码），并使用fillRect方法绘制了一个从坐标(0, 0)开始，宽度为200像素，高度为100像素的矩形。这将在canvas中创建一个红色的矩形。
评论已关闭