html画布绘制图形
warning:
这篇文章距离上次修改已过199天，其中的内容可能已经有所变动。
在HTML中，您可以使用<canvas>元素来绘制图形。以下是一个简单的例子，展示了如何使用JavaScript在HTML画布上绘制一个简单的矩形。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持Canvas。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 设置填充颜色为蓝色
ctx.fillStyle = "#0000FF";
// 绘制一个填充矩形
ctx.fillRect(20, 20, 150, 75);
// 设置线条颜色为红色
ctx.strokeStyle = "#FF0000";
// 绘制一个只有边框的矩形
ctx.strokeRect(20, 100, 150, 75);
</script>
</body>
</html>这段代码首先获取了页面上id为myCanvas的画布元素，并创建了一个2D绘图上下文。然后，使用fillRect()方法绘制了一个填充的蓝色矩形，使用strokeRect()方法绘制了一个仅边框的红色矩形。
评论已关闭