HTML5 canvas基础制图之绘图矩形框

<canvas></canvas>只是1个绘图图型的器皿，除id、class、style等特性外，也有height和width特性。在<canvas>>元素上制图关键有3步：

1.获得<canvas>元素对应的DOM目标，这是1个Canvas目标；
2.启用Canvas目标的getContext()方式，获得1个CanvasRenderingContext2D目标；
3.启用CanvasRenderingContext2D目标开展制图。

绘图矩形框rect()、fillRect()和strokeRect()

 •context.rect( x , y , width , height )：只界定矩形框的相对路径；
 •context.fillRect( x , y , width , height )：立即绘图出填充的矩形框；
 •context.strokeRect( x , y , width , height )：立即绘图出矩形框边框；

这里必须表明两点：第1点便是stroke()和fill()绘图的前后左右次序，假如fill()后边绘图，那末当stroke边框较大时，会显著的把stroke()绘图出的边框遮挡住1半；第2点：设定fillStyle或strokeStyle特性时，能够根据“rgba(255,0,0,0.2)”的设定方法来设定，这个设定的最终1个主要参数是全透明度。

此外也有1个跟矩形框绘图相关的：消除矩形框地区：context.clearRect(x,y,width,height)。
接受主要参数各自为：消除矩形框的起止部位和矩形框的宽和长。
在上面的编码中绘图图型的最终再加：

context.clearRect(100,60,600,100);

能够获得下列实际效果：

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。