js实现矩形
使用Canvas绘制矩形
在JavaScript中，可以通过HTML5的Canvas API绘制矩形。Canvas提供了两种绘制矩形的方法：fillRect()用于填充矩形，strokeRect()用于绘制矩形边框。
// 获取Canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 填充矩形（x, y, width, height）
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 80);
// 绘制矩形边框
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.strokeRect(200, 50, 100, 80);使用SVG创建矩形
SVG（Scalable Vector Graphics）是另一种在网页上绘制矩形的方式。SVG是XML-based的矢量图形格式，可以直接嵌入HTML中。
<svg width="400" height="200">
<!-- 填充矩形 -->
<rect x="50" y="50" width="100" height="80" fill="blue" />
<!-- 边框矩形 -->
<rect x="200" y="50" width="100" height="80" stroke="red" stroke-width="3" fill="none" />
</svg>使用CSS绘制矩形
纯CSS也可以创建矩形，通常通过设置元素的宽度、高度和背景色来实现。
<style>
.filled-rect {
width: 100px;
height: 80px;
background-color: blue;
}
.bordered-rect {
width: 100px;
height: 80px;
border: 3px solid red;
box-sizing: border-box;
}
</style>
<div class="filled-rect"></div>
<div class="bordered-rect"></div>使用WebGL绘制矩形
对于更高级的图形需求，可以使用WebGL绘制矩形。WebGL基于OpenGL ES，适合高性能图形渲染。
// 获取WebGL上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
// 顶点着色器
const vsSource = `
attribute vec2 aPosition;
void main() {
gl_Position = vec4(aPosition, 0.0, 1.0);
}
`;
// 片段着色器
const fsSource = `
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
// 初始化着色器程序
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
// 定义矩形顶点
const vertices = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
-0.5, 0.5,
0.5, 0.5
]);
// 创建缓冲区并绑定数据
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 绘制矩形
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);使用第三方库绘制矩形
对于更复杂的图形需求，可以考虑使用第三方库如D3.js、Three.js或Paper.js。
// 使用D3.js绘制矩形
d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 200)
.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 100)
.attr("height", 80)
.attr("fill", "blue");
// 使用Three.js绘制矩形
const geometry = new THREE.PlaneGeometry(100, 80);
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const rectangle = new THREE.Mesh(geometry, material);
scene.add(rectangle);以上方法涵盖了从基础到高级的矩形绘制技术，适用于不同的应用场景和需求。
