canvas 绘制矩形

XXX(x,y,width,height)   x矩形左上角x坐标
                                  y矩形左上角y坐标
                                  width 矩形宽度
                                  height 矩形高度


rect()                  创建矩形                                               和stroke()与fill()一起使用
fillRect()              绘制“被填充”的矩形                                和fillStyle属性一起使用，放在fillStyle属性后面
strokeRect()        绘制矩形（无填充）                                和strokeStyle属性一起使用，放在strokeStyle属性后面
clearRect()          在给定的矩形内清除指定的像素               

    <canvas id="a" width="500" height="450" style="border:1px solid #000"></canvas>
    <script type="text/javascript">
    var a=document.getElementById("a");
    var ctx=a.getContext("2d");
    ctx.rect(20,20,150,100);                //创建矩形
    //ctx.stroke();                                //绘制已定义的路径
    ctx.fill();                                        //绘制当前绘图

    ctx.fillStyle="red";                        //设置或返回用于填充绘画的颜色、渐变或模式
    ctx.fillRect(200,20,150,100);        //绘制“被填充”的矩形

    ctx.strokeStyle="blue";                //设置或返回用于笔触的颜色、渐变或模式
    ctx.strokeRect(20,150,150,100);        //绘制矩形（无填充）

    ctx.fillStyle="red";                        //设置或返回用于填充绘画的颜色、渐变或模式
    ctx.fillRect(200,150,150,100);        //绘制“被填充”的矩形
    ctx.clearRect(220,170,50,50);        //在给定的矩形内清除指定的像素
    </script>

 

转载于:https://www.cnblogs.com/ricesm/p/5066968.html