HTML Canvas 绘制红色正方形：简单示例
当然，这是一个基本的 Canvas 示例，它会在一个画布上绘制一个红色的正方形：
<!DOCTYPE html>
<html>
<head>
<title>Canvas 示例</title>
<style>
#myCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id='myCanvas' width='200' height='200'></canvas>
<script>
// 获取画布元素
var canvas = document.getElementById('myCanvas');
// 获取绘图上下文
var ctx = canvas.getContext('2d');
// 设置填充颜色为红色
ctx.fillStyle = 'red';
// 绘制一个正方形
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>
这个示例会创建一个 200x200 像素大小的画布，并在画布上绘制一个红色的正方形。您可以在浏览器中运行这个示例，看到绘制的结果。希望这个示例对您有所帮助！
原文地址: https://www.cveoy.top/t/topic/RQ5 著作权归作者所有。请勿转载和采集!