JavaScript输出矩形从入门到精通掌握多种绘制方法与技巧提升前端开发技能

威震华夏关云长

引言

在Web前端开发中，图形绘制是一项基础且重要的技能。矩形作为最基础的几何图形之一，在各种Web应用中都有广泛的应用，从简单的界面元素到复杂的数据可视化。掌握JavaScript输出矩形的多种方法，不仅能提升你的前端开发技能，还能为你在创建用户界面、数据可视化、游戏开发等方面提供强大的工具。本文将带你从基础到高级，全面了解使用JavaScript绘制矩形的各种方法和技巧。

1. 基础方法：使用HTML和CSS创建矩形

1.1 使用HTML元素创建矩形

最简单的创建矩形的方法是使用HTML元素，如div，并通过CSS设置其样式：

2. <div class="rectangle"></div>

复制代码

2. .rectangle {
3.   width: 200px;
4.   height: 100px;
5.   background-color: #3498db;
6. }

复制代码

这种方法简单直观，适合创建静态的矩形元素，但缺乏动态性和灵活性。

1.2 使用JavaScript动态创建矩形元素

我们可以使用JavaScript动态创建矩形元素，并添加到DOM中：

2. // 创建矩形元素
3. function createRectangle(width, height, color) {
4.   const rectangle = document.createElement('div');
5.   rectangle.style.width = width + 'px';
6.   rectangle.style.height = height + 'px';
7.   rectangle.style.backgroundColor = color;
8.   
9.   // 添加到页面中
10.   document.body.appendChild(rectangle);
11.   
12.   return rectangle;
13. }
15. // 使用示例
16. const myRectangle = createRectangle(300, 150, '#e74c3c');

复制代码

这种方法允许我们根据需要动态创建矩形，但仍然受限于CSS样式的能力。

2. Canvas API绘制矩形

Canvas API是HTML5提供的一个强大的绘图接口，它允许我们使用JavaScript在画布上绘制图形，包括矩形。

2.1 Canvas基础设置

首先，我们需要在HTML中创建一个canvas元素：

2. <canvas id="myCanvas" width="500" height="300"></canvas>

复制代码

然后，在JavaScript中获取canvas上下文：

2. const canvas = document.getElementById('myCanvas');
3. const ctx = canvas.getContext('2d');

复制代码

2.2 绘制填充矩形

使用fillRect()方法绘制填充矩形：

2. function drawFilledRectangle(x, y, width, height, color) {
3.   ctx.fillStyle = color;
4.   ctx.fillRect(x, y, width, height);
5. }
7. // 使用示例
8. drawFilledRectangle(50, 50, 200, 100, '#3498db');

复制代码

2.3 绘制描边矩形

使用strokeRect()方法绘制只有边框的矩形：

2. function drawStrokedRectangle(x, y, width, height, color, lineWidth) {
3.   ctx.strokeStyle = color;
4.   ctx.lineWidth = lineWidth || 1;
5.   ctx.strokeRect(x, y, width, height);
6. }
8. // 使用示例
9. drawStrokedRectangle(100, 100, 200, 100, '#e74c3c', 3);

复制代码

2.4 绘制填充和描边矩形

结合fillRect()和strokeRect()方法，我们可以创建既有填充又有描边的矩形：

2. function drawRectangleWithStroke(x, y, width, height, fillColor, strokeColor, lineWidth) {
3.   // 绘制填充矩形
4.   ctx.fillStyle = fillColor;
5.   ctx.fillRect(x, y, width, height);
6.   
7.   // 绘制描边矩形
8.   ctx.strokeStyle = strokeColor;
9.   ctx.lineWidth = lineWidth || 1;
10.   ctx.strokeRect(x, y, width, height);
11. }
13. // 使用示例
14. drawRectangleWithStroke(150, 150, 200, 100, '#2ecc71', '#27ae60', 3);

复制代码

2.5 使用路径绘制矩形

我们也可以使用路径来绘制矩形，这提供了更多的灵活性：

2. function drawRectangleWithPath(x, y, width, height, fillColor, strokeColor, lineWidth) {
3.   ctx.beginPath();
4.   ctx.rect(x, y, width, height);
5.   
6.   if (fillColor) {
7.     ctx.fillStyle = fillColor;
8.     ctx.fill();
9.   }
10.   
11.   if (strokeColor) {
12.     ctx.strokeStyle = strokeColor;
13.     ctx.lineWidth = lineWidth || 1;
14.     ctx.stroke();
15.   }
16. }
18. // 使用示例
19. drawRectangleWithPath(200, 200, 200, 100, '#f39c12', '#d68910', 3);

复制代码

2.6 清除矩形区域

使用clearRect()方法可以清除指定矩形区域的内容：

2. function clearRectangleArea(x, y, width, height) {
3.   ctx.clearRect(x, y, width, height);
4. }
6. // 使用示例
7. // 在画布上绘制一个矩形
8. drawFilledRectangle(50, 50, 200, 100, '#3498db');
9. // 清除矩形的一部分
10. clearRectangleArea(100, 75, 100, 50);

复制代码

3. SVG绘制矩形

SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它也可以用来绘制矩形。与Canvas不同，SVG创建的图形是DOM元素，可以直接通过CSS样式化或通过JavaScript操作。

3.1 基本SVG矩形

在HTML中创建SVG矩形：

2. <svg width="500" height="300">
3.   <rect x="50" y="50" width="200" height="100" fill="#3498db" />
4. </svg>

复制代码

3.2 使用JavaScript动态创建SVG矩形

我们可以使用JavaScript动态创建SVG矩形元素：

2. function createSVGRectangle(container, x, y, width, height, fill, stroke, strokeWidth) {
3.   // 创建SVG元素
4.   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
5.   svg.setAttribute('width', '500');
6.   svg.setAttribute('height', '300');
7.   
8.   // 创建矩形元素
9.   const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
10.   rect.setAttribute('x', x);
11.   rect.setAttribute('y', y);
12.   rect.setAttribute('width', width);
13.   rect.setAttribute('height', height);
14.   
15.   if (fill) rect.setAttribute('fill', fill);
16.   if (stroke) rect.setAttribute('stroke', stroke);
17.   if (strokeWidth) rect.setAttribute('stroke-width', strokeWidth);
18.   
19.   // 将矩形添加到SVG中
20.   svg.appendChild(rect);
21.   
22.   // 将SVG添加到容器中
23.   container.appendChild(svg);
24.   
25.   return rect;
26. }
28. // 使用示例
29. const container = document.getElementById('svg-container');
30. createSVGRectangle(container, 50, 50, 200, 100, '#e74c3c', '#c0392b', 3);

复制代码

3.3 SVG矩形的圆角

SVG矩形支持圆角，通过rx和ry属性设置：

2. function createRoundedSVGRectangle(container, x, y, width, height, rx, ry, fill, stroke, strokeWidth) {
3.   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
4.   svg.setAttribute('width', '500');
5.   svg.setAttribute('height', '300');
6.   
7.   const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
8.   rect.setAttribute('x', x);
9.   rect.setAttribute('y', y);
10.   rect.setAttribute('width', width);
11.   rect.setAttribute('height', height);
12.   rect.setAttribute('rx', rx);
13.   rect.setAttribute('ry', ry);
14.   
15.   if (fill) rect.setAttribute('fill', fill);
16.   if (stroke) rect.setAttribute('stroke', stroke);
17.   if (strokeWidth) rect.setAttribute('stroke-width', strokeWidth);
18.   
19.   svg.appendChild(rect);
20.   container.appendChild(svg);
21.   
22.   return rect;
23. }
25. // 使用示例
26. createRoundedSVGRectangle(container, 100, 100, 200, 100, 10, 10, '#2ecc71', '#27ae60', 3);

复制代码

4. 使用JavaScript库绘制矩形

除了原生API，我们还可以使用各种JavaScript库来简化矩形绘制过程。

4.1 使用jQuery创建矩形

jQuery可以简化DOM操作，使创建和操作矩形更加容易：

2. <div id="rectangle-container"></div>

复制代码

2. function createJQueryRectangle(container, width, height, color) {
3.   const $rectangle = $('<div></div>')
4.     .css({
5.       'width': width + 'px',
6.       'height': height + 'px',
7.       'background-color': color
8.     })
9.     .appendTo(container);
10.   
11.   return $rectangle;
12. }
14. // 使用示例
15. const $container = $('#rectangle-container');
16. const $myRectangle = createJQueryRectangle($container, 300, 150, '#9b59b6');

复制代码

4.2 使用D3.js创建矩形

D3.js是一个强大的数据可视化库，它提供了创建和操作SVG元素的方法：

2. <div id="d3-container"></div>

复制代码

2. function createD3Rectangle(container, x, y, width, height, fill, stroke, strokeWidth) {
3.   // 创建SVG容器
4.   const svg = d3.select(container)
5.     .append('svg')
6.     .attr('width', 500)
7.     .attr('height', 300);
8.   
9.   // 创建矩形
10.   const rectangle = svg.append('rect')
11.     .attr('x', x)
12.     .attr('y', y)
13.     .attr('width', width)
14.     .attr('height', height)
15.     .attr('fill', fill);
16.   
17.   if (stroke) {
18.     rectangle.attr('stroke', stroke);
19.   }
20.   
21.   if (strokeWidth) {
22.     rectangle.attr('stroke-width', strokeWidth);
23.   }
24.   
25.   return rectangle;
26. }
28. // 使用示例
29. const d3Container = document.getElementById('d3-container');
30. createD3Rectangle(d3Container, 50, 50, 200, 100, '#1abc9c', '#16a085', 3);

复制代码

4.3 使用Paper.js创建矩形

Paper.js是一个强大的矢量图形脚本框架，它运行在Canvas之上：

2. <canvas id="paper-canvas" width="500" height="300"></canvas>

复制代码

2. // 初始化Paper.js
3. paper.setup('paper-canvas');
5. function createPaperRectangle(x, y, width, height, fillColor, strokeColor, strokeWidth) {
6.   const rectangle = new paper.Rectangle(new paper.Point(x, y), new paper.Size(width, height));
7.   const path = new paper.Path.Rectangle(rectangle);
8.   
9.   if (fillColor) {
10.     path.fillColor = fillColor;
11.   }
12.   
13.   if (strokeColor) {
14.     path.strokeColor = strokeColor;
15.   }
16.   
17.   if (strokeWidth) {
18.     path.strokeWidth = strokeWidth;
19.   }
20.   
21.   paper.view.draw();
22.   
23.   return path;
24. }
26. // 使用示例
27. createPaperRectangle(100, 100, 200, 100, '#f1c40f', '#f39c12', 3);

复制代码

5. 高级技巧：动画矩形和交互式矩形

5.1 使用CSS动画创建动画矩形

我们可以使用CSS动画为矩形添加简单的动画效果：

2. <div class="animated-rectangle"></div>

复制代码

2. .animated-rectangle {
3.   width: 100px;
4.   height: 100px;
5.   background-color: #3498db;
6.   animation: moveAndChange 3s infinite alternate;
7. }
9. @keyframes moveAndChange {
10.   0% {
11.     transform: translateX(0);
12.     background-color: #3498db;
13.   }
14.   100% {
15.     transform: translateX(400px);
16.     background-color: #e74c3c;
17.   }
18. }

复制代码

5.2 使用JavaScript控制矩形动画

使用JavaScript可以更灵活地控制矩形动画：

2. <canvas id="animation-canvas" width="500" height="300"></canvas>

复制代码

2. const canvas = document.getElementById('animation-canvas');
3. const ctx = canvas.getContext('2d');
5. let x = 50;
6. let y = 50;
7. let width = 100;
8. let height = 100;
9. let dx = 2; // x方向速度
10. let dy = 1; // y方向速度
11. let color = '#3498db';
13. function animateRectangle() {
14.   // 清除画布
15.   ctx.clearRect(0, 0, canvas.width, canvas.height);
16.   
17.   // 绘制矩形
18.   ctx.fillStyle = color;
19.   ctx.fillRect(x, y, width, height);
20.   
21.   // 更新位置
22.   x += dx;
23.   y += dy;
24.   
25.   // 边界检测
26.   if (x + width > canvas.width || x < 0) {
27.     dx = -dx;
28.     color = getRandomColor();
29.   }
30.   
31.   if (y + height > canvas.height || y < 0) {
32.     dy = -dy;
33.     color = getRandomColor();
34.   }
35.   
36.   // 继续动画
37.   requestAnimationFrame(animateRectangle);
38. }
40. function getRandomColor() {
41.   const letters = '0123456789ABCDEF';
42.   let color = '#';
43.   for (let i = 0; i < 6; i++) {
44.     color += letters[Math.floor(Math.random() * 16)];
45.   }
46.   return color;
47. }
49. // 开始动画
50. animateRectangle();

复制代码

5.3 创建交互式矩形

我们可以创建响应用户交互的矩形：

2. <canvas id="interactive-canvas" width="500" height="300"></canvas>

复制代码

2. const canvas = document.getElementById('interactive-canvas');
3. const ctx = canvas.getContext('2d');
5. // 矩形对象
6. const rectangle = {
7.   x: 200,
8.   y: 150,
9.   width: 100,
10.   height: 100,
11.   color: '#3498db',
12.   isDragging: false,
13.   offsetX: 0,
14.   offsetY: 0
15. };
17. // 绘制矩形
18. function drawRectangle() {
19.   ctx.clearRect(0, 0, canvas.width, canvas.height);
20.   ctx.fillStyle = rectangle.color;
21.   ctx.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
22. }
24. // 检查点是否在矩形内
25. function isPointInRectangle(x, y) {
26.   return x >= rectangle.x &&
27.          x <= rectangle.x + rectangle.width &&
28.          y >= rectangle.y &&
29.          y <= rectangle.y + rectangle.height;
30. }
32. // 鼠标按下事件
33. canvas.addEventListener('mousedown', (e) => {
34.   const rect = canvas.getBoundingClientRect();
35.   const x = e.clientX - rect.left;
36.   const y = e.clientY - rect.top;
37.   
38.   if (isPointInRectangle(x, y)) {
39.     rectangle.isDragging = true;
40.     rectangle.offsetX = x - rectangle.x;
41.     rectangle.offsetY = y - rectangle.y;
42.     canvas.style.cursor = 'grabbing';
43.   }
44. });
46. // 鼠标移动事件
47. canvas.addEventListener('mousemove', (e) => {
48.   const rect = canvas.getBoundingClientRect();
49.   const x = e.clientX - rect.left;
50.   const y = e.clientY - rect.top;
51.   
52.   if (rectangle.isDragging) {
53.     rectangle.x = x - rectangle.offsetX;
54.     rectangle.y = y - rectangle.offsetY;
55.     drawRectangle();
56.   } else if (isPointInRectangle(x, y)) {
57.     canvas.style.cursor = 'grab';
58.   } else {
59.     canvas.style.cursor = 'default';
60.   }
61. });
63. // 鼠标释放事件
64. canvas.addEventListener('mouseup', () => {
65.   rectangle.isDragging = false;
66.   canvas.style.cursor = 'default';
67. });
69. // 初始绘制
70. drawRectangle();

复制代码

5.4 使用WebGL创建3D矩形

WebGL允许我们在浏览器中创建3D图形。下面是一个使用WebGL创建3D旋转矩形的示例：

2. <canvas id="webgl-canvas" width="500" height="300"></canvas>

复制代码

2. const canvas = document.getElementById('webgl-canvas');
3. const gl = canvas.getContext('webgl');
5. // 顶点着色器源码
6. const vsSource = `
7.   attribute vec4 aVertexPosition;
8.   attribute vec4 aVertexColor;
9.   
10.   uniform mat4 uModelViewMatrix;
11.   uniform mat4 uProjectionMatrix;
12.   
13.   varying lowp vec4 vColor;
14.   
15.   void main(void) {
16.     gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
17.     vColor = aVertexColor;
18.   }
19. `;
21. // 片段着色器源码
22. const fsSource = `
23.   varying lowp vec4 vColor;
24.   
25.   void main(void) {
26.     gl_FragColor = vColor;
27.   }
28. `;
30. // 创建着色器
31. function loadShader(gl, type, source) {
32.   const shader = gl.createShader(type);
33.   gl.shaderSource(shader, source);
34.   gl.compileShader(shader);
35.   
36.   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
37.     console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
38.     gl.deleteShader(shader);
39.     return null;
40.   }
41.   
42.   return shader;
43. }
45. // 初始化着色器程序
46. function initShaderProgram(gl, vsSource, fsSource) {
47.   const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
48.   const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
49.   
50.   const shaderProgram = gl.createProgram();
51.   gl.attachShader(shaderProgram, vertexShader);
52.   gl.attachShader(shaderProgram, fragmentShader);
53.   gl.linkProgram(shaderProgram);
54.   
55.   if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
56.     console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
57.     return null;
58.   }
59.   
60.   return shaderProgram;
61. }
63. const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
65. const programInfo = {
66.   program: shaderProgram,
67.   attribLocations: {
68.     vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
69.     vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
70.   },
71.   uniformLocations: {
72.     projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
73.     modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
74.   },
75. };
77. // 创建矩形缓冲区
78. function initBuffers(gl) {
79.   // 矩形顶点位置
80.   const positions = [
81.     // 前面
82.     -1.0, -1.0,  1.0,
83.      1.0, -1.0,  1.0,
84.      1.0,  1.0,  1.0,
85.     -1.0,  1.0,  1.0,
86.    
87.     // 后面
88.     -1.0, -1.0, -1.0,
89.     -1.0,  1.0, -1.0,
90.      1.0,  1.0, -1.0,
91.      1.0, -1.0, -1.0,
92.    
93.     // 顶面
94.     -1.0,  1.0, -1.0,
95.     -1.0,  1.0,  1.0,
96.      1.0,  1.0,  1.0,
97.      1.0,  1.0, -1.0,
98.    
99.     // 底面
100.     -1.0, -1.0, -1.0,
101.      1.0, -1.0, -1.0,
102.      1.0, -1.0,  1.0,
103.     -1.0, -1.0,  1.0,
104.    
105.     // 右面
106.      1.0, -1.0, -1.0,
107.      1.0,  1.0, -1.0,
108.      1.0,  1.0,  1.0,
109.      1.0, -1.0,  1.0,
110.    
111.     // 左面
112.     -1.0, -1.0, -1.0,
113.     -1.0, -1.0,  1.0,
114.     -1.0,  1.0,  1.0,
115.     -1.0,  1.0, -1.0,
116.   ];
117.   
118.   const positionBuffer = gl.createBuffer();
119.   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
120.   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
121.   
122.   // 矩形面颜色
123.   const faceColors = [
124.     [1.0, 0.0, 0.0, 1.0],    // 前面: 红色
125.     [0.0, 1.0, 0.0, 1.0],    // 后面: 绿色
126.     [0.0, 0.0, 1.0, 1.0],    // 顶面: 蓝色
127.     [1.0, 1.0, 0.0, 1.0],    // 底面: 黄色
128.     [1.0, 0.0, 1.0, 1.0],    // 右面: 紫色
129.     [0.0, 1.0, 1.0, 1.0],    // 左面: 青色
130.   ];
131.   
132.   let colors = [];
133.   for (let j = 0; j < faceColors.length; ++j) {
134.     const c = faceColors[j];
135.     colors = colors.concat(c, c, c, c);
136.   }
137.   
138.   const colorBuffer = gl.createBuffer();
139.   gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
140.   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
141.   
142.   // 矩形索引
143.   const indices = [
144.     0,  1,  2,      0,  2,  3,    // 前面
145.     4,  5,  6,      4,  6,  7,    // 后面
146.     8,  9,  10,     8,  10, 11,   // 顶面
147.     12, 13, 14,     12, 14, 15,   // 底面
148.     16, 17, 18,     16, 18, 19,   // 右面
149.     20, 21, 22,     20, 22, 23,   // 左面
150.   ];
151.   
152.   const indexBuffer = gl.createBuffer();
153.   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
154.   gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
155.   
156.   return {
157.     position: positionBuffer,
158.     color: colorBuffer,
159.     indices: indexBuffer,
160.   };
161. }
163. const buffers = initBuffers(gl);
165. // 绘制场景
166. function drawScene(gl, programInfo, buffers, deltaTime) {
167.   gl.clearColor(0.0, 0.0, 0.0, 1.0);
168.   gl.clearDepth(1.0);
169.   gl.enable(gl.DEPTH_TEST);
170.   gl.depthFunc(gl.LEQUAL);
171.   
172.   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
173.   
174.   // 创建透视矩阵
175.   const fieldOfView = 45 * Math.PI / 180;
176.   const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
177.   const zNear = 0.1;
178.   const zFar = 100.0;
179.   const projectionMatrix = mat4.create();
180.   
181.   mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
182.   
183.   // 创建模型视图矩阵
184.   const modelViewMatrix = mat4.create();
185.   
186.   mat4.translate(modelViewMatrix, modelViewMatrix, [-0.0, 0.0, -6.0]);
187.   mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation, [0, 0, 1]);
188.   mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]);
189.   
190.   // 设置位置属性
191.   {
192.     const numComponents = 3;
193.     const type = gl.FLOAT;
194.     const normalize = false;
195.     const stride = 0;
196.     const offset = 0;
197.     gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
198.     gl.vertexAttribPointer(
199.         programInfo.attribLocations.vertexPosition,
200.         numComponents,
201.         type,
202.         normalize,
203.         stride,
204.         offset);
205.     gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
206.   }
207.   
208.   // 设置颜色属性
209.   {
210.     const numComponents = 4;
211.     const type = gl.FLOAT;
212.     const normalize = false;
213.     const stride = 0;
214.     const offset = 0;
215.     gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
216.     gl.vertexAttribPointer(
217.         programInfo.attribLocations.vertexColor,
218.         numComponents,
219.         type,
220.         normalize,
221.         stride,
222.         offset);
223.     gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
224.   }
225.   
226.   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
227.   
228.   gl.useProgram(programInfo.program);
229.   
230.   gl.uniformMatrix4fv(
231.       programInfo.uniformLocations.projectionMatrix,
232.       false,
233.       projectionMatrix);
234.   gl.uniformMatrix4fv(
235.       programInfo.uniformLocations.modelViewMatrix,
236.       false,
237.       modelViewMatrix);
238.   
239.   {
240.     const vertexCount = 36;
241.     const type = gl.UNSIGNED_SHORT;
242.     const offset = 0;
243.     gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
244.   }
245.   
246.   cubeRotation += deltaTime;
247. }
249. let cubeRotation = 0.0;
250. let then = 0;
252. // 渲染循环
253. function render(now) {
254.   now *= 0.001;
255.   const deltaTime = now - then;
256.   then = now;
257.   
258.   drawScene(gl, programInfo, buffers, deltaTime);
259.   
260.   requestAnimationFrame(render);
261. }
262. requestAnimationFrame(render);

复制代码

注意：上面的WebGL示例使用了gl-matrix库来进行矩阵运算。在实际使用中，你需要先引入这个库。

6. 性能优化和最佳实践

6.1 Canvas性能优化

当使用Canvas绘制大量矩形时，性能可能会成为一个问题。以下是一些优化技巧：

只重绘发生变化的部分，而不是整个画布：

2. // 不好的做法：每次清除整个画布
3. function animate() {
4.   ctx.clearRect(0, 0, canvas.width, canvas.height);
5.   drawAllRectangles();
6.   requestAnimationFrame(animate);
7. }
9. // 好的做法：只清除需要重绘的部分
10. function animate() {
11.   // 只清除上一帧的矩形位置
12.   ctx.clearRect(prevX, prevY, width, height);
13.   
14.   // 绘制新位置的矩形
15.   drawRectangle(x, y, width, height);
16.   
17.   // 更新上一帧的位置
18.   prevX = x;
19.   prevY = y;
20.   
21.   requestAnimationFrame(animate);
22. }

复制代码

对于复杂的静态内容，可以使用离屏Canvas进行预渲染：

2. // 创建离屏Canvas
3. const offscreenCanvas = document.createElement('canvas');
4. const offscreenCtx = offscreenCanvas.getContext('2d');
5. offscreenCanvas.width = 500;
6. offscreenCanvas.height = 300;
8. // 在离屏Canvas上绘制静态内容
9. function drawStaticContent() {
10.   offscreenCtx.fillStyle = '#ecf0f1';
11.   offscreenCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
12.   
13.   // 绘制多个静态矩形
14.   for (let i = 0; i < 50; i++) {
15.     const x = Math.random() * offscreenCanvas.width;
16.     const y = Math.random() * offscreenCanvas.height;
17.     const width = 20 + Math.random() * 30;
18.     const height = 20 + Math.random() * 30;
19.     const color = `hsl(${Math.random() * 360}, 70%, 60%)`;
20.    
21.     offscreenCtx.fillStyle = color;
22.     offscreenCtx.fillRect(x, y, width, height);
23.   }
24. }
26. // 在主Canvas上绘制离屏Canvas的内容
27. function drawScene() {
28.   ctx.clearRect(0, 0, canvas.width, canvas.height);
29.   
30.   // 绘制离屏Canvas的内容
31.   ctx.drawImage(offscreenCanvas, 0, 0);
32.   
33.   // 绘制动态内容
34.   drawDynamicRectangle();
35. }
37. // 初始化
38. drawStaticContent();

复制代码

尽量减少绘制调用的次数，批量处理相似的绘制操作：

2. // 不好的做法：多次调用绘制方法
3. function drawMultipleRectanglesBad(rectangles) {
4.   rectangles.forEach(rect => {
5.     ctx.fillStyle = rect.color;
6.     ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
7.   });
8. }
10. // 好的做法：批量处理相同颜色的矩形
11. function drawMultipleRectanglesGood(rectangles) {
12.   // 按颜色分组
13.   const rectanglesByColor = {};
14.   rectangles.forEach(rect => {
15.     if (!rectanglesByColor[rect.color]) {
16.       rectanglesByColor[rect.color] = [];
17.     }
18.     rectanglesByColor[rect.color].push(rect);
19.   });
20.   
21.   // 批量绘制
22.   Object.keys(rectanglesByColor).forEach(color => {
23.     ctx.fillStyle = color;
24.     rectanglesByColor[color].forEach(rect => {
25.       ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
26.     });
27.   });
28. }

复制代码

6.2 SVG性能优化

当需要显示大量矩形时，尽量减少SVG元素的数量：

2. // 不好的做法：为每个矩形创建一个SVG元素
3. function createManyRectanglesBad(count) {
4.   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
5.   svg.setAttribute('width', '500');
6.   svg.setAttribute('height', '300');
7.   
8.   for (let i = 0; i < count; i++) {
9.     const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
10.     rect.setAttribute('x', Math.random() * 450);
11.     rect.setAttribute('y', Math.random() * 250);
12.     rect.setAttribute('width', 20 + Math.random() * 30);
13.     rect.setAttribute('height', 20 + Math.random() * 30);
14.     rect.setAttribute('fill', `hsl(${Math.random() * 360}, 70%, 60%)`);
15.     svg.appendChild(rect);
16.   }
17.   
18.   return svg;
19. }
21. // 好的做法：使用单个path元素绘制多个矩形
22. function createManyRectanglesGood(count) {
23.   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
24.   svg.setAttribute('width', '500');
25.   svg.setAttribute('height', '300');
26.   
27.   const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
28.   let pathData = '';
29.   
30.   for (let i = 0; i < count; i++) {
31.     const x = Math.random() * 450;
32.     const y = Math.random() * 250;
33.     const width = 20 + Math.random() * 30;
34.     const height = 20 + Math.random() * 30;
35.    
36.     pathData += `M ${x} ${y} L ${x + width} ${y} L ${x + width} ${y + height} L ${x} ${y + height} Z `;
37.   }
38.   
39.   path.setAttribute('d', pathData);
40.   path.setAttribute('fill', 'none');
41.   path.setAttribute('stroke', '#333');
42.   path.setAttribute('stroke-width', '1');
43.   
44.   svg.appendChild(path);
45.   return svg;
46. }

复制代码

对于简单的动画，使用CSS动画比JavaScript动画性能更好：

2. <svg width="500" height="300">
3.   <rect class="animated-rect" x="50" y="50" width="100" height="100" fill="#3498db" />
4. </svg>

复制代码

2. .animated-rect {
3.   animation: move 3s infinite alternate;
4.   transform-origin: center;
5. }
7. @keyframes move {
8.   0% {
9.     transform: translateX(0) rotate(0deg);
10.   }
11.   100% {
12.     transform: translateX(300px) rotate(180deg);
13.   }
14. }

复制代码

6.3 通用最佳实践

对于动画，使用requestAnimationFrame而不是setTimeout或setInterval：

2. // 不好的做法
3. function animateBad() {
4.   updateRectanglePosition();
5.   drawRectangle();
6.   setTimeout(animateBad, 16); // 约60fps
7. }
9. // 好的做法
10. function animateGood() {
11.   updateRectanglePosition();
12.   drawRectangle();
13.   requestAnimationFrame(animateGood);
14. }
16. // 开始动画
17. animateGood();

复制代码

在动画循环中，避免重复计算不变的值：

2. // 不好的做法：每次循环都计算
3. function animateBad() {
4.   const centerX = canvas.width / 2;
5.   const centerY = canvas.height / 2;
6.   const radius = 100;
7.   
8.   const angle = Date.now() * 0.001;
9.   const x = centerX + Math.cos(angle) * radius;
10.   const y = centerY + Math.sin(angle) * radius;
11.   
12.   drawRectangle(x, y, 50, 50);
13.   requestAnimationFrame(animateBad);
14. }
16. // 好的做法：预先计算不变的值
17. function animateGood() {
18.   // 这些值在循环外计算一次
19.   const centerX = canvas.width / 2;
20.   const centerY = canvas.height / 2;
21.   const radius = 100;
22.   
23.   return function animate() {
24.     const angle = Date.now() * 0.001;
25.     const x = centerX + Math.cos(angle) * radius;
26.     const y = centerY + Math.sin(angle) * radius;
27.    
28.     drawRectangle(x, y, 50, 50);
29.     requestAnimationFrame(animate);
30.   };
31. }
33. // 开始动画
34. const animate = animateGood();
35. animate();

复制代码

对于频繁创建和销毁的对象，使用对象池模式可以提高性能：

2. // 矩形对象池
3. const rectanglePool = {
4.   objects: [],
5.   new: function(x, y, width, height, color) {
6.     if (this.objects.length > 0) {
7.       const rect = this.objects.pop();
8.       rect.x = x;
9.       rect.y = y;
10.       rect.width = width;
11.       rect.height = height;
12.       rect.color = color;
13.       return rect;
14.     } else {
15.       return { x, y, width, height, color };
16.     }
17.   },
18.   free: function(rect) {
19.     this.objects.push(rect);
20.   }
21. };
23. // 使用对象池
24. function drawManyRectangles(count) {
25.   const rectangles = [];
26.   
27.   // 创建矩形
28.   for (let i = 0; i < count; i++) {
29.     const rect = rectanglePool.new(
30.       Math.random() * 450,
31.       Math.random() * 250,
32.       20 + Math.random() * 30,
33.       20 + Math.random() * 30,
34.       `hsl(${Math.random() * 360}, 70%, 60%)`
35.     );
36.     rectangles.push(rect);
37.   }
38.   
39.   // 绘制矩形
40.   rectangles.forEach(rect => {
41.     ctx.fillStyle = rect.color;
42.     ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
43.   });
44.   
45.   // 释放矩形回对象池
46.   rectangles.forEach(rect => {
47.     rectanglePool.free(rect);
48.   });
49. }

复制代码

7. 实际应用案例

7.1 数据可视化：柱状图

矩形在数据可视化中非常常见，例如柱状图：

2. <canvas id="chart-canvas" width="600" height="400"></canvas>

复制代码

2. const canvas = document.getElementById('chart-canvas');
3. const ctx = canvas.getContext('2d');
5. // 数据
6. const data = [
7.   { label: 'A', value: 30 },
8.   { label: 'B', value: 50 },
9.   { label: 'C', value: 80 },
10.   { label: 'D', value: 40 },
11.   { label: 'E', value: 70 },
12.   { label: 'F', value: 20 }
13. ];
15. // 图表配置
16. const chartConfig = {
17.   padding: 40,
18.   barWidth: 60,
19.   barSpacing: 20,
20.   colors: ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c']
21. };
23. // 计算最大值
24. const maxValue = Math.max(...data.map(item => item.value));
26. // 绘制坐标轴
27. function drawAxes() {
28.   ctx.beginPath();
29.   ctx.strokeStyle = '#333';
30.   ctx.lineWidth = 2;
31.   
32.   // Y轴
33.   ctx.moveTo(chartConfig.padding, chartConfig.padding);
34.   ctx.lineTo(chartConfig.padding, canvas.height - chartConfig.padding);
35.   
36.   // X轴
37.   ctx.moveTo(chartConfig.padding, canvas.height - chartConfig.padding);
38.   ctx.lineTo(canvas.width - chartConfig.padding, canvas.height - chartConfig.padding);
39.   
40.   ctx.stroke();
41.   
42.   // 绘制Y轴刻度
43.   const yAxisSteps = 5;
44.   for (let i = 0; i <= yAxisSteps; i++) {
45.     const y = canvas.height - chartConfig.padding - (i / yAxisSteps) * (canvas.height - 2 * chartConfig.padding);
46.     const value = Math.round((i / yAxisSteps) * maxValue);
47.    
48.     ctx.beginPath();
49.     ctx.moveTo(chartConfig.padding - 5, y);
50.     ctx.lineTo(chartConfig.padding, y);
51.     ctx.stroke();
52.    
53.     ctx.fillStyle = '#333';
54.     ctx.font = '12px Arial';
55.     ctx.textAlign = 'right';
56.     ctx.textBaseline = 'middle';
57.     ctx.fillText(value, chartConfig.padding - 10, y);
58.   }
59. }
61. // 绘制柱状图
62. function drawBarChart() {
63.   // 清除画布
64.   ctx.clearRect(0, 0, canvas.width, canvas.height);
65.   
66.   // 绘制坐标轴
67.   drawAxes();
68.   
69.   // 计算图表高度
70.   const chartHeight = canvas.height - 2 * chartConfig.padding;
71.   
72.   // 绘制柱子
73.   data.forEach((item, index) => {
74.     const x = chartConfig.padding + index * (chartConfig.barWidth + chartConfig.barSpacing) + chartConfig.barSpacing;
75.     const barHeight = (item.value / maxValue) * chartHeight;
76.     const y = canvas.height - chartConfig.padding - barHeight;
77.    
78.     // 绘制柱子
79.     ctx.fillStyle = chartConfig.colors[index % chartConfig.colors.length];
80.     ctx.fillRect(x, y, chartConfig.barWidth, barHeight);
81.    
82.     // 绘制标签
83.     ctx.fillStyle = '#333';
84.     ctx.font = '14px Arial';
85.     ctx.textAlign = 'center';
86.     ctx.textBaseline = 'top';
87.     ctx.fillText(item.label, x + chartConfig.barWidth / 2, canvas.height - chartConfig.padding + 10);
88.    
89.     // 绘制数值
90.     ctx.textBaseline = 'bottom';
91.     ctx.fillText(item.value, x + chartConfig.barWidth / 2, y);
92.   });
93. }
95. // 初始绘制
96. drawBarChart();
98. // 添加动画效果
99. let animationProgress = 0;
100. const animationDuration = 1000; // 1秒
101. const startTime = Date.now();
103. function animateChart() {
104.   const currentTime = Date.now();
105.   animationProgress = Math.min((currentTime - startTime) / animationDuration, 1);
106.   
107.   // 清除画布
108.   ctx.clearRect(0, 0, canvas.width, canvas.height);
109.   
110.   // 绘制坐标轴
111.   drawAxes();
112.   
113.   // 计算图表高度
114.   const chartHeight = canvas.height - 2 * chartConfig.padding;
115.   
116.   // 绘制柱子（带动画）
117.   data.forEach((item, index) => {
118.     const x = chartConfig.padding + index * (chartConfig.barWidth + chartConfig.barSpacing) + chartConfig.barSpacing;
119.     const targetHeight = (item.value / maxValue) * chartHeight;
120.     const barHeight = targetHeight * animationProgress;
121.     const y = canvas.height - chartConfig.padding - barHeight;
122.    
123.     // 绘制柱子
124.     ctx.fillStyle = chartConfig.colors[index % chartConfig.colors.length];
125.     ctx.fillRect(x, y, chartConfig.barWidth, barHeight);
126.    
127.     // 绘制标签
128.     ctx.fillStyle = '#333';
129.     ctx.font = '14px Arial';
130.     ctx.textAlign = 'center';
131.     ctx.textBaseline = 'top';
132.     ctx.fillText(item.label, x + chartConfig.barWidth / 2, canvas.height - chartConfig.padding + 10);
133.    
134.     // 绘制数值（只在动画完成后显示）
135.     if (animationProgress === 1) {
136.       ctx.textBaseline = 'bottom';
137.       ctx.fillText(item.value, x + chartConfig.barWidth / 2, y);
138.     }
139.   });
140.   
141.   // 继续动画
142.   if (animationProgress < 1) {
143.     requestAnimationFrame(animateChart);
144.   }
145. }
147. // 开始动画
148. animateChart();

复制代码

7.2 游戏开发：简单的平台游戏

矩形在游戏开发中非常常见，例如平台游戏中的角色、平台和障碍物：

2. <canvas id="game-canvas" width="800" height="400"></canvas>

复制代码

2. const canvas = document.getElementById('game-canvas');
3. const ctx = canvas.getContext('2d');
5. // 游戏状态
6. const game = {
7.   gravity: 0.5,
8.   friction: 0.8,
9.   isRunning: true
10. };
12. // 玩家对象
13. const player = {
14.   x: 100,
15.   y: 200,
16.   width: 30,
17.   height: 50,
18.   velocityX: 0,
19.   velocityY: 0,
20.   speed: 5,
21.   jumpPower: 12,
22.   color: '#3498db',
23.   isJumping: false
24. };
26. // 平台数组
27. const platforms = [
28.   { x: 0, y: 350, width: 800, height: 50, color: '#2c3e50' },
29.   { x: 200, y: 280, width: 100, height: 20, color: '#2c3e50' },
30.   { x: 400, y: 220, width: 100, height: 20, color: '#2c3e50' },
31.   { x: 600, y: 160, width: 100, height: 20, color: '#2c3e50' }
32. ];
34. // 障碍物数组
35. const obstacles = [
36.   { x: 300, y: 320, width: 30, height: 30, color: '#e74c3c' },
37.   { x: 500, y: 190, width: 30, height: 30, color: '#e74c3c' }
38. ];
40. // 收集品数组
41. const collectibles = [
42.   { x: 250, y: 250, width: 20, height: 20, color: '#f1c40f', collected: false },
43.   { x: 450, y: 190, width: 20, height: 20, color: '#f1c40f', collected: false },
44.   { x: 650, y: 130, width: 20, height: 20, color: '#f1c40f', collected: false }
45. ];
47. // 键盘输入
48. const keys = {};
49. document.addEventListener('keydown', (e) => {
50.   keys[e.key] = true;
51. });
52. document.addEventListener('keyup', (e) => {
53.   keys[e.key] = false;
54. });
56. // 更新玩家状态
57. function updatePlayer() {
58.   // 左右移动
59.   if (keys['ArrowLeft'] || keys['a']) {
60.     player.velocityX = -player.speed;
61.   } else if (keys['ArrowRight'] || keys['d']) {
62.     player.velocityX = player.speed;
63.   } else {
64.     player.velocityX *= game.friction;
65.   }
66.   
67.   // 跳跃
68.   if ((keys['ArrowUp'] || keys['w'] || keys[' ']) && !player.isJumping) {
69.     player.velocityY = -player.jumpPower;
70.     player.isJumping = true;
71.   }
72.   
73.   // 应用重力
74.   player.velocityY += game.gravity;
75.   
76.   // 更新位置
77.   player.x += player.velocityX;
78.   player.y += player.velocityY;
79.   
80.   // 边界检查
81.   if (player.x < 0) {
82.     player.x = 0;
83.     player.velocityX = 0;
84.   } else if (player.x + player.width > canvas.width) {
85.     player.x = canvas.width - player.width;
86.     player.velocityX = 0;
87.   }
88.   
89.   // 检查是否掉出屏幕
90.   if (player.y > canvas.height) {
91.     resetPlayer();
92.   }
93. }
95. // 重置玩家位置
96. function resetPlayer() {
97.   player.x = 100;
98.   player.y = 200;
99.   player.velocityX = 0;
100.   player.velocityY = 0;
101. }
103. // 碰撞检测
104. function checkCollisions() {
105.   // 平台碰撞
106.   player.isJumping = true;
107.   platforms.forEach(platform => {
108.     if (
109.       player.x < platform.x + platform.width &&
110.       player.x + player.width > platform.x &&
111.       player.y < platform.y + platform.height &&
112.       player.y + player.height > platform.y
113.     ) {
114.       // 从上方碰撞
115.       if (player.velocityY > 0 && player.y < platform.y) {
116.         player.y = platform.y - player.height;
117.         player.velocityY = 0;
118.         player.isJumping = false;
119.       }
120.       // 从下方碰撞
121.       else if (player.velocityY < 0 && player.y > platform.y) {
122.         player.y = platform.y + platform.height;
123.         player.velocityY = 0;
124.       }
125.       // 从左侧碰撞
126.       else if (player.velocityX > 0 && player.x < platform.x) {
127.         player.x = platform.x - player.width;
128.         player.velocityX = 0;
129.       }
130.       // 从右侧碰撞
131.       else if (player.velocityX < 0 && player.x > platform.x) {
132.         player.x = platform.x + platform.width;
133.         player.velocityX = 0;
134.       }
135.     }
136.   });
137.   
138.   // 障碍物碰撞
139.   obstacles.forEach(obstacle => {
140.     if (
141.       player.x < obstacle.x + obstacle.width &&
142.       player.x + player.width > obstacle.x &&
143.       player.y < obstacle.y + obstacle.height &&
144.       player.y + player.height > obstacle.y
145.     ) {
146.       resetPlayer();
147.     }
148.   });
149.   
150.   // 收集品碰撞
151.   collectibles.forEach(collectible => {
152.     if (
153.       !collectible.collected &&
154.       player.x < collectible.x + collectible.width &&
155.       player.x + player.width > collectible.x &&
156.       player.y < collectible.y + collectible.height &&
157.       player.y + player.height > collectible.y
158.     ) {
159.       collectible.collected = true;
160.     }
161.   });
162. }
164. // 绘制游戏
165. function drawGame() {
166.   // 清除画布
167.   ctx.clearRect(0, 0, canvas.width, canvas.height);
168.   
169.   // 绘制背景
170.   ctx.fillStyle = '#ecf0f1';
171.   ctx.fillRect(0, 0, canvas.width, canvas.height);
172.   
173.   // 绘制平台
174.   platforms.forEach(platform => {
175.     ctx.fillStyle = platform.color;
176.     ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
177.   });
178.   
179.   // 绘制障碍物
180.   obstacles.forEach(obstacle => {
181.     ctx.fillStyle = obstacle.color;
182.     ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
183.   });
184.   
185.   // 绘制收集品
186.   collectibles.forEach(collectible => {
187.     if (!collectible.collected) {
188.       ctx.fillStyle = collectible.color;
189.       ctx.fillRect(collectible.x, collectible.y, collectible.width, collectible.height);
190.     }
191.   });
192.   
193.   // 绘制玩家
194.   ctx.fillStyle = player.color;
195.   ctx.fillRect(player.x, player.y, player.width, player.height);
196.   
197.   // 绘制分数
198.   const collectedCount = collectibles.filter(c => c.collected).length;
199.   ctx.fillStyle = '#333';
200.   ctx.font = '20px Arial';
201.   ctx.textAlign = 'left';
202.   ctx.fillText(`收集品: ${collectedCount}/${collectibles.length}`, 20, 30);
203.   
204.   // 检查胜利条件
205.   if (collectedCount === collectibles.length) {
206.     ctx.fillStyle = '#2ecc71';
207.     ctx.font = '40px Arial';
208.     ctx.textAlign = 'center';
209.     ctx.fillText('你赢了！', canvas.width / 2, canvas.height / 2);
210.     game.isRunning = false;
211.   }
212. }
214. // 游戏循环
215. function gameLoop() {
216.   if (game.isRunning) {
217.     updatePlayer();
218.     checkCollisions();
219.   }
220.   
221.   drawGame();
222.   requestAnimationFrame(gameLoop);
223. }
225. // 开始游戏
226. gameLoop();

复制代码

7.3 图像处理：使用矩形选择区域

矩形在图像处理中也很有用，例如选择图像的特定区域：

2. <div>
3.   <canvas id="image-canvas" width="600" height="400"></canvas>
4.   <canvas id="selection-canvas" width="200" height="200"></canvas>
5. </div>

复制代码

2. const imageCanvas = document.getElementById('image-canvas');
3. const imageCtx = imageCanvas.getContext('2d');
4. const selectionCanvas = document.getElementById('selection-canvas');
5. const selectionCtx = selectionCanvas.getContext('2d');
7. // 加载图像
8. const img = new Image();
9. img.crossOrigin = 'Anonymous';
10. img.onload = function() {
11.   // 绘制图像到画布
12.   imageCtx.drawImage(img, 0, 0, imageCanvas.width, imageCanvas.height);
13. };
14. img.src = 'https://picsum.photos/seed/rectangle-demo/600/400.jpg';
16. // 选择区域
17. const selection = {
18.   x: 100,
19.   y: 100,
20.   width: 200,
21.   height: 150,
22.   isDragging: false,
23.   isResizing: false,
24.   dragStartX: 0,
25.   dragStartY: 0,
26.   resizeHandle: null
27. };
29. // 绘制选择矩形
30. function drawSelection() {
31.   // 清除画布并重新绘制图像
32.   imageCtx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
33.   imageCtx.drawImage(img, 0, 0, imageCanvas.width, imageCanvas.height);
34.   
35.   // 绘制半透明覆盖层
36.   imageCtx.fillStyle = 'rgba(0, 0, 0, 0.5)';
37.   imageCtx.fillRect(0, 0, imageCanvas.width, imageCanvas.height);
38.   
39.   // 清除选择区域
40.   imageCtx.clearRect(selection.x, selection.y, selection.width, selection.height);
41.   imageCtx.drawImage(
42.     img,
43.     selection.x * (img.width / imageCanvas.width),
44.     selection.y * (img.height / imageCanvas.height),
45.     selection.width * (img.width / imageCanvas.width),
46.     selection.height * (img.height / imageCanvas.height),
47.     selection.x,
48.     selection.y,
49.     selection.width,
50.     selection.height
51.   );
52.   
53.   // 绘制选择边框
54.   imageCtx.strokeStyle = '#3498db';
55.   imageCtx.lineWidth = 2;
56.   imageCtx.strokeRect(selection.x, selection.y, selection.width, selection.height);
57.   
58.   // 绘制调整大小的手柄
59.   const handleSize = 8;
60.   imageCtx.fillStyle = '#3498db';
61.   
62.   // 四个角的手柄
63.   imageCtx.fillRect(selection.x - handleSize/2, selection.y - handleSize/2, handleSize, handleSize); // 左上
64.   imageCtx.fillRect(selection.x + selection.width - handleSize/2, selection.y - handleSize/2, handleSize, handleSize); // 右上
65.   imageCtx.fillRect(selection.x - handleSize/2, selection.y + selection.height - handleSize/2, handleSize, handleSize); // 左下
66.   imageCtx.fillRect(selection.x + selection.width - handleSize/2, selection.y + selection.height - handleSize/2, handleSize, handleSize); // 右下
67.   
68.   // 更新选择区域的图像
69.   updateSelectionImage();
70. }
72. // 更新选择区域的图像
73. function updateSelectionImage() {
74.   selectionCtx.clearRect(0, 0, selectionCanvas.width, selectionCanvas.height);
75.   selectionCtx.drawImage(
76.     imageCanvas,
77.     selection.x, selection.y, selection.width, selection.height,
78.     0, 0, selectionCanvas.width, selectionCanvas.height
79.   );
80. }
82. // 检查点是否在选择矩形内
83. function isPointInSelection(x, y) {
84.   return x >= selection.x &&
85.          x <= selection.x + selection.width &&
86.          y >= selection.y &&
87.          y <= selection.y + selection.height;
88. }
90. // 检查点是否在调整大小的手柄上
91. function getResizeHandle(x, y) {
92.   const handleSize = 8;
93.   const tolerance = handleSize;
94.   
95.   // 左上角
96.   if (Math.abs(x - selection.x) < tolerance && Math.abs(y - selection.y) < tolerance) {
97.     return 'nw';
98.   }
99.   // 右上角
100.   if (Math.abs(x - (selection.x + selection.width)) < tolerance && Math.abs(y - selection.y) < tolerance) {
101.     return 'ne';
102.   }
103.   // 左下角
104.   if (Math.abs(x - selection.x) < tolerance && Math.abs(y - (selection.y + selection.height)) < tolerance) {
105.     return 'sw';
106.   }
107.   // 右下角
108.   if (Math.abs(x - (selection.x + selection.width)) < tolerance && Math.abs(y - (selection.y + selection.height)) < tolerance) {
109.     return 'se';
110.   }
111.   
112.   return null;
113. }
115. // 鼠标事件处理
116. imageCanvas.addEventListener('mousedown', (e) => {
117.   const rect = imageCanvas.getBoundingClientRect();
118.   const x = e.clientX - rect.left;
119.   const y = e.clientY - rect.top;
120.   
121.   const handle = getResizeHandle(x, y);
122.   if (handle) {
123.     selection.isResizing = true;
124.     selection.resizeHandle = handle;
125.     selection.dragStartX = x;
126.     selection.dragStartY = y;
127.   } else if (isPointInSelection(x, y)) {
128.     selection.isDragging = true;
129.     selection.dragStartX = x - selection.x;
130.     selection.dragStartY = y - selection.y;
131.     imageCanvas.style.cursor = 'move';
132.   }
133. });
135. imageCanvas.addEventListener('mousemove', (e) => {
136.   const rect = imageCanvas.getBoundingClientRect();
137.   const x = e.clientX - rect.left;
138.   const y = e.clientY - rect.top;
139.   
140.   if (selection.isResizing) {
141.     const dx = x - selection.dragStartX;
142.     const dy = y - selection.dragStartY;
143.    
144.     switch (selection.resizeHandle) {
145.       case 'nw':
146.         selection.x += dx;
147.         selection.y += dy;
148.         selection.width -= dx;
149.         selection.height -= dy;
150.         break;
151.       case 'ne':
152.         selection.y += dy;
153.         selection.width += dx;
154.         selection.height -= dy;
155.         break;
156.       case 'sw':
157.         selection.x += dx;
158.         selection.width -= dx;
159.         selection.height += dy;
160.         break;
161.       case 'se':
162.         selection.width += dx;
163.         selection.height += dy;
164.         break;
165.     }
166.    
167.     // 确保最小尺寸
168.     if (selection.width < 20) selection.width = 20;
169.     if (selection.height < 20) selection.height = 20;
170.    
171.     selection.dragStartX = x;
172.     selection.dragStartY = y;
173.    
174.     drawSelection();
175.   } else if (selection.isDragging) {
176.     selection.x = x - selection.dragStartX;
177.     selection.y = y - selection.dragStartY;
178.    
179.     // 确保不超出边界
180.     if (selection.x < 0) selection.x = 0;
181.     if (selection.y < 0) selection.y = 0;
182.     if (selection.x + selection.width > imageCanvas.width) selection.x = imageCanvas.width - selection.width;
183.     if (selection.y + selection.height > imageCanvas.height) selection.y = imageCanvas.height - selection.height;
184.    
185.     drawSelection();
186.   } else {
187.     // 更新鼠标样式
188.     const handle = getResizeHandle(x, y);
189.     if (handle) {
190.       switch (handle) {
191.         case 'nw':
192.         case 'se':
193.           imageCanvas.style.cursor = 'nw-resize';
194.           break;
195.         case 'ne':
196.         case 'sw':
197.           imageCanvas.style.cursor = 'ne-resize';
198.           break;
199.       }
200.     } else if (isPointInSelection(x, y)) {
201.       imageCanvas.style.cursor = 'move';
202.     } else {
203.       imageCanvas.style.cursor = 'default';
204.     }
205.   }
206. });
208. imageCanvas.addEventListener('mouseup', () => {
209.   selection.isDragging = false;
210.   selection.isResizing = false;
211.   selection.resizeHandle = null;
212.   imageCanvas.style.cursor = 'default';
213. });
215. // 初始绘制
216. img.onload = function() {
217.   imageCtx.drawImage(img, 0, 0, imageCanvas.width, imageCanvas.height);
218.   drawSelection();
219. };

复制代码

8. 总结

本文详细介绍了使用JavaScript输出矩形的多种方法，从基础的HTML/CSS方法到高级的Canvas、SVG和WebGL技术。我们探讨了如何使用原生API以及各种JavaScript库来创建静态和动态矩形，并提供了丰富的代码示例和实际应用案例。

通过学习这些技术，你可以：

1. 使用HTML/CSS创建简单的矩形元素
2. 使用Canvas API绘制复杂的矩形图形和动画
3. 使用SVG创建可缩放的矢量矩形
4. 利用JavaScript库简化矩形绘制过程
5. 创建交互式矩形和动画效果
6. 优化矩形绘制的性能
7. 将矩形技术应用于数据可视化、游戏开发和图像处理等领域

掌握这些技能将大大提升你的前端开发能力，使你能够创建更加丰富和交互性强的Web应用。无论是简单的界面元素还是复杂的图形应用，矩形都是一个基础且重要的组成部分。

希望本文能够帮助你全面了解JavaScript输出矩形的各种方法和技巧，并在你的项目中灵活应用这些技术。