用js实现在canvas中画图

以下是一个简单的例子，用于在canvas中绘制一个红色的矩形：

首先，在HTML中添加一个canvas元素：

<canvas id="myCanvas" width="200" height="200"></canvas>

然后，在JavaScript中获取该元素，并获取其上下文（context）：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

最后，使用canvas的API绘制一个红色的矩形：

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

上述代码中，fillStyle属性用于设置填充颜色，fillRect方法用于绘制一个矩形。其中，前两个参数指定矩形的左上角坐标，后两个参数指定矩形的宽度和高度。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>Canvas Demo</title>
	<style>
		canvas {
			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>