JavaScript开发：巧用Canvas与HTML5 SVG绘制矩形全攻略

在HTML5中，我们可以使用canvas和SVG来绘制矩形。下面是使用canvas和SVG分别绘制矩形的方法： 1. 使用canvas绘制矩形： ```javascript // 获取canvas元素 var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 设置矩形的宽度和高度 var width = 100; var height = 50; // 设置矩形的颜色 var color = 'blue'; // 使用fillRect方法绘制矩形 ctx.fillStyle = color; ctx.fillRect(10, 10, width, height); ``` 2. 使用SVG绘制矩形： ```html <svg width="200" height="200"> <rect x="10" y="10" width="100" height="50" style="fill:blue;" /> </svg> ``` 在上面的代码中，我们创建了一个SVG元素，并在其内部添加了一个rect元素，用于绘制矩形。我们设置了矩形的x、y、width和height属性，以及fill属性来设置矩形的颜色。 注意，你需要在HTML文件的head部分添加以下代码来启用SVG： ```html <svg xmlns="http://www.w3.org/2000/svg"> </svg> ``` 如果你使用的是React或Vue等现代JavaScript框架，你可能需要使用它们提供的库或插件来更好地使用canvas和SVG。例如，对于React，你可以使用react-canvas或react-native-web来创建canvas元素。对于Vue，你可以使用vue-svg或vue2-ace来创建SVG元素。 ######[AI写代码神器 | 341点数解答 | 2023-11-09 01:08:58]