<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<canvas id="t_canvas" width="1000" height="1000" ></canvas>
<script type="text/javascript">
//画布,将图形画到这上面,超出范围的不显示
var t_canvas1=document.getElementById("t_canvas");
var context1=t_canvas1.getContext("2d");
context1.beginPath();
context1.moveTo(0,0);
context1.lineTo(0,290);
context1.lineTo(290,290);
context1.closePath();
context1.fillStyle="rgb(200,0,0)";
context1.fill();
/绘图1
context1.fillStyle="#000000";
context1.fillRect(300,300,100,100);
context1.fillStyle="#000000";
context1.fillRect(100,100,100,100);
context1.fillRect(50,50,100,100);
</script>
</body>
</html>
截图如下: