Canvas绘制矩形

Canvas绘制矩形

context.rect ( x ,y ,width ,height ) //规划了矩形的路径
context.fillRect ( x ,y ,width ,height ) //根据fillStyle绘制出一个填充的矩形
context.strokeRect ( x ,y ,width ,height ) 根据strokeStyle绘制出一个矩形的边框

context.rect() 与context.fillRect()、context.strokeRect()的区别
context.rect()只是规划了矩形的路径，而context.fillRect()、context.strokeRect()不但规划了矩形的路径还把矩形绘制了出来。

fillStyle和strokeStyle的赋值：
① #ffffff
② #4e3
③ rgb( 100 ,100 ,2 )
④ rgba( 100 ,100 ,20 ,0.9 )
⑤ hsla( 40 ,82% ,33% ,0.6 )
⑥ hsl( 40 ,82% ,33% )
⑦ red

注：CSS3 颜色值HSL表示方式：HSL(H,S,L)
- H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
- S：Saturation(饱和度)。取值为：0.0% - 100.0%
- L：Lightness(亮度)。取值为：0.0% - 100.0%