<!DOCTYPE html><html><head><meta charset=" "><title>添补矩形</title><script type="text/javascript">function draw(){ var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); ctx.fillStyle = "rgba(0,0,200,0.5)"; ctx.fillRect(50,30,150,75); }}</script><!--style标记内是CSS语法--><style type="text/css">canvas { border: 1px solid black; } //将框线设为1px</style></head><body onload="draw();"><canvas id="myCanvas"></canvas></body></html>

canvas利用步骤解释：

1 <canvas>创建的绘图区一开始是空缺的,首先须要利用JavaScript的getElementById获取DOM的canvas元素(element)。

var canvas = document.getElementById('myCanvas');

2 为了避免不支持canvas的浏览器运行JavaScript时涌现缺点,可以先用if条件测试是否能获取canvas的getContext方法

htmlcanvas矩形canvas填充矩形 GraphQL

if(canvas.getContext){//但getContext存在时,会运行这里的语句}else{//但getContext不存在时,会运行这里的语句}

3 创建2d context工具

var ctx = canvas.getContext("2d');

4 利用fillStyle属性指定图形的颜色为赤色

ctx.fillStyle = "#FF00000";ctx.fillStyle = "rgba(0,0,200,0.5)";

5 fillRect属性用于绘制矩形并且指定绘制方向和大小

ctx.fillRect (0,0,150,75);

(0,0,150,75) 这4个数值分别代表矩形的起始点坐标(x,y),宽(width)和高(height)