canvas制作矩形
1、新建一个html文件。如图：
3、为了让效果更好看，我们给canvas标签设置样式。在title标签后面创建一个<style>然后设置canvas的样式。效果：样式代码：<style>#canvas{border: 1px solid #ddd;margin:50px auto;display: block;}</style>
5、设置矩形距离画布的距离和宽、高、背景颜色。使用fillRect（x , y, widht，height）设置矩形与画布的距离、宽、高；使用fillStyle设置矩形背景的颜色。设置效果如图：设置代码：content.fillStyle = "aqua"; content.fillRect(100,100,200,200);
7、制作的所有代码。只要把所有代码复制到html文竭惮蚕斗件上，保存后运行即可看到效果。所有代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> #canvas{ border: 1px solid #ddd; margin:50px auto; display: block; } </style> <script type="text/javascript"> window.onload = function(){ var canvas=document.getElementById("canvas"); var content=canvas.getContext("2d"); content.fillStyle = "aqua"; content.fillRect(100,100,200,200); } </script> </head> <body> <canvas id="canvas" width="600" height="500"> </canvas> </body></html>
