矩形绘制：
<head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/ecmascript"> function draw(){ var canvas=document.getElementById("test"); if(canvas.getContext){ var ctx=canvas.getContext("2d"); ctx.fillStyle="rgb(200,200,0)"; //背景色rgb ctx.fillRect(10,10,100,100)； //相对矩形的坐标 绘制矩形的宽高 ctx.fillStyle="rgba(0,200,0,0.5)"; //背景半透明 ctx.fillRect(50,50,100,100); // 相对矩形的坐标 绘制矩形的宽高 }; }; </script> </head> <body onLoad="draw();"> <canvas id="test" width="150" height="150"></canvas> </body>
矩形内部清空部分区域+边框设置：
<head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/ecmascript"> function draw(){ var canvas=document.getElementById("test"); if(canvas.getContext){ var ctx=canvas.getContext("2d"); ctx.fillStyle="rgb(200,200,0)"; //矩形填充色 ctx.strokeStyle="red" //边框颜色 ctx.fillRect(10,10,100,100); //矩形位置坐标，矩形宽高 ctx.clearRect(30,30,60,60); //矩形内清空一个矩形的大小，位置，宽高 ctx.strokeRect(35,35,50,50); //边框的位置，边框的宽高 }; }; </script> </head> <body onLoad="draw();"> <canvas id="test" width="150" height="150"></canvas> </body>