JavaScript动画-5（矩形）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

吃饱饭才有力气写代码~

前面都是理论性的铺垫，今天来画一个矩形玩一玩儿

2D绘图上下文

2D绘图上下文可以画矩形、弧形和路径这几类2D图形，它的坐标原点在的左上角，所有坐标的值都相对于这个点计算，默认情况下width和height表示两个方向上像素的最大值。
2D上下文的两个基本操作：填充和描边，这两个属于见名知意，填充就是用指定的样式填充形状，描边只为图形边界着色，显示效果取决于属性：fillStyle 和 strokeStyle:

let drawing = document.getElementById("drawing");
if(drawing.getContext){
    let context = drawing.getContext("2d");
    context.stroleStyle = "red";
    context.fillStyle = "#0000ff";
}

像上面这个例子一样，这两个属性可以是字符串，渐变对象或图案对象；

绘制矩形

矩形是唯一一个可以直接在2D绘图上下文中绘制的形状，相关的方法：fillRect() 、strokeRect() 和 clearRect() ，这些方法都接收四个参数：矩形x坐标、矩形y坐标、矩形宽度和矩形高度，单位均为像素：

let drawing = document.getElementById("drawing");
if(drawing.getContext){
    let context = drawing.getContext("2d");
    
    context.fillStyle = "#0000ff";
    context.FILLRect (10,10,50,50);
}

上述代码就在坐标点(10,10)绘制了一个宽高均为50像素的矩形，并且填充为了红色。

let drawing = document.getElementById("drawing");
if(drawing.getContext){
    let context = drawing.getContext("2d");
    
    context.strokeStyle = "#0000ff";
    context.strokeStyle (10,10,50,50);
}

这个是只有轮廓的空心的矩形；

let drawing = document.getElementById("drawing");
if(drawing.getContext){
    let context = drawing.getContext("2d");
    
    context.fillStyle = "#0000ff";
    context.FILLRect = (10,10,50,50);
    
    context.clearRect (40,40,10,10);
}

clearRect()这个方法就是用来擦除画布中的某个区域，一般先绘制形状再擦除指定区域。