JS在画布上绘制正方形 - Javascript

在JavaScript中，我们可以使用HTML5的canvas元素来在网页中绘制图形。一个非常基本的图形就是正方形。

以下是使用Javascript绘制正方形的完整代码：

// 获取画布元素
var canvas = document.getElementById("myCanvas");
// 获取2D绘图上下文
var ctx = canvas.getContext("2d");
// 绘制正方形
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 100, 100);

上面的代码中，我们首先使用JavaScript获取HTML中的canvas元素，然后获取2D绘图上下文并设置绘制颜色。在使用fillRect方法绘制正方形时，需要指定起始点的x、y坐标和正方形的宽度和高度。

代码解析

代码的第一行使用document.getElementById获取id为"myCanvas"的canvas元素，并将其存储在变量canvas中。接下来，我们使用canvas.getContext("2d")获取2D绘图上下文，并将其存储在变量ctx中。

在第三行中，我们使用fillStyle属性将绘图颜色设置为红色。fillRect是CanvasRenderingContext2D接口的方法之一，用于在画布上绘制填充矩形。此方法采用四个参数：起始点的x、y坐标和矩形的宽度和高度。

最后，我们在第四行中调用fillRect方法，绘制一个100x100像素的红色正方形，起始点坐标为(50, 50)。

总结

在JS中使用canvas绘制图形需要使用CanvasRenderingContext2D接口。通过设置绘图上下文的属性和方法来定制图形，包括图形的颜色、大小、位置等。在本文中，我们使用fillRect方法来绘制正方形，并提供了完整的代码示例。