HTML5中canvas画图之画矩形和矩形掏空

来源：互联网发布：node v6.10.0 x64.msi 编辑：程序博客网时间：2024/05/04 00:01

rect方法用于绘制矩形（长方形）。其语法如下:

context.rect(x，y，高度，宽度);

绘制代码如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>绘制矩形</title></head><body><canvas id="canvas" width="300" height="300"></canvas><script type="text/javascript">var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//绘制ctx.fillStyle="#ff00000";ctx.strokeStyle="#0000ff";ctx.lineWidth=3;ctx.rect(20,20,240,240);ctx.fill();//填充ctx.stroke();//绘制边框</script></body></html>

还有个函数是掏空（清空）矩形的。方法原型如下：context(x，y，w，h)。

代码如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>绘制矩形</title></head><body><canvas id="canvas" width="300" height="300"></canvas><script type="text/javascript">var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//绘制ctx.fillStyle="#ff00000";ctx.strokeStyle="#0000ff";ctx.lineWidth=3;ctx.rect(20,20,240,240);ctx.fill();//填充ctx.stroke();//绘制边框ctx.clearRect(50,50,150,150);</script></body></html>

截图如下:

0 0