1、新建一个html文件。如图：
2、在html文件上找body标签，在body标签里创建<canvas>然后给canvas标签添加一个id="canvas"，同时设置宽和高。如图：代码：<canvas id="canvas" width="600" height="500"></canvas>
3、为了让效果更好看，我们给canvas标签设置样式。在title标签后面创建一个<style>然后设置canvas的样式。效果：样式代码：<style>#canvas{border: 1px solid #ddd;margin:50px auto;display: block;}</style>
4、指定绘制效果为2蟠校盯昂d。在style标签后面新建一个<script>标签，在这个表里设置canvas的绘制类型为2d。效果如图：设置代码：<script type="text/javascript">window.onload = function(){ var canvas=document.getElementById("canvas"); var content=canvas.getContext("2d");}</script>
5、设置矩形距离画布的距离和宽、高、背景颜色。使用fillRect（x , y, widht，height）设置矩形与画布的距离、宽、高；使用fillStyle设置矩形背景的颜色。设置效果如图：设置代码：content.fillStyle = "aqua"; content.fillRect(100,100,200,200);
6、保存好html文件后使用浏览器打开查看效果，即可看到一个矩形就制作出来了。如图：
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>
