当前位置：首页 > JavaScript

js实现矩形

2026-02-02 01:07:09JavaScript

使用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);

以上方法涵盖了从基础到高级的矩形绘制技术，适用于不同的应用场景和需求。

js实现矩形