先说一下canvas元素比较游泳的方法主要是canvas通过getContext()方法获取的上下文对象。
其次设置颜色方面，通常有四种方法：16进制颜色值、英语单词、rgb、rgba。主要注意的是后两者，rgb的三个参数是红绿蓝0-255的值，rgba在此基础上添加了第四个参数透明度，范围0-1。
1.画矩形
<!DOCTYPE html><html><head lang="en"> <meta charset="utf-8"> <title></title> <script> //画矩形 function drawRect(id){ var canvas = document.getElementById(id); //获取上下文对象，canvas很多常用方法都是基于这个对象实现的 var context = canvas.getContext('2d'); //目前参数只有2d context.fillStyle = "gray"; //填充颜色 context.strokeStyle = "#f60"; //边框颜色 context.lineWidth = 5; //边框宽度 context.fillRect(0,0,400,300); //参数：x,y,width,height。绘制“已填色”的矩形,默认填充颜色是黑色 context.strokeRect(80,80,180,120); //参数：x,y,width,height。绘制未填色的矩形,默认填充颜色是黑色 context.strokeRect(110,110,180,120); } </script><head><body onload="drawRect('canvas');"><canvas id="canvas" width="400px" height="400px" ></canvas></body></html>JavaScript已经是所有浏览器的默认脚本语言，因此
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
