canvas(三)绘制矩形

1.绘制矩形轨迹

ctx.rect(x,y,width,height)：这个方法根据传入的参数（起始坐标和宽高）用来绘制一个矩形轨迹。

注意：ctx.rect()和ctx.lineTo()绘制的都是轨迹，需要配合stroke或者fill()才能在画布中看到效果

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    // 根据原点和宽高绘制矩形轨迹
    ctx.rect(50,50,100,100)
    // 设置描边的颜色
    ctx.strokeStyle = "red"
    // 设置直线宽度
    ctx.lineWidth = 10
    // 开始绘制描边
    ctx.stroke()

    // 绘制填充的矩形
    // 开启新路径
    ctx.beginPath()
    // 根据原点和宽高绘制矩形轨迹
    ctx.rect(200,50,100,100)
    // 设置填充颜色
    ctx.fillStyle = "blue"
    // 开始填充
    ctx.fill()
</script>

2.绘制矩形

ctx.strokeRect(x,y,width,height)：绘制描边的矩形，有独立路径
ctx.fillRect(x,y,width,height)：绘制填充的矩形，有独立路径

这两个方法不同于rect()，它有独立的路径，且自带绘制。无需调用stroke()和fill()

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    // 先设置描边颜色
    ctx.strokeStyle= "red"
    // 设置直线宽度
    ctx.lineWidth = 10
    // 绘制描边的矩形
    ctx.strokeRect(50,50,100,100)

    // 设置填充的颜色
    ctx.fillStyle = "blue"
    // 绘制填充的矩形
    ctx.fillRect(200,50,100,100)
</script>

3.清除区域内容

ctx.clearRect(x,y,width,height)：清除这个矩形区域的内容（橡皮擦）

清除整个画布的内容 400*300

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    // 先设置描边颜色
    ctx.strokeStyle= "red"
    // 设置直线宽度
    ctx.lineWidth = 10
    // 绘制描边的矩形
    ctx.strokeRect(50,50,100,100)

    // 设置填充的颜色
    ctx.fillStyle = "blue"
    // 绘制填充的矩形
    ctx.fillRect(200,50,100,100)

    // 清除整个画布的内容
    ctx.clearRect(0,0,400,300)
</script>

清除一部分画布的内容

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    // 先设置描边颜色
    ctx.strokeStyle= "red"
    // 设置直线宽度
    ctx.lineWidth = 10
    // 绘制描边的矩形
    ctx.strokeRect(50,50,100,100)

    // 设置填充的颜色
    ctx.fillStyle = "blue"
    // 绘制填充的矩形
    ctx.fillRect(200,50,100,100)

    // 清除一部分区域的内容
    ctx.clearRect(200,50,100,100)
</script>

4.绘制线性渐变的矩形

前面绘制的矩形填充颜色都很单一，可以使用相关API来绘制一个线性渐变的矩形。
相关API：
createLinearGradient(x0,y0,x1,y1)
addColorStop(0.5, 'green')

步骤一：创建渐变方案 ，传入起点坐标和结束坐标，来确定渐变的方向
步骤二：设置渐变方案的颜色
步骤三：将其设置成填充颜色

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    // 创建线性渐变方案(传入起点坐标和结束坐标)（长度200）（水平方向）
    var linearGradient = ctx.createLinearGradient(50,0,200,0)
    // 设置渐变的颜色
    linearGradient.addColorStop(0,"red") //起始颜色
    linearGradient.addColorStop(0.5,"green") //中间颜色
    linearGradient.addColorStop(1,"blue") //末尾颜色
    // 使用渐变色
    ctx.fillStyle = linearGradient

    // 绘制填充的矩形(长度200)（水平方向起点一致）
    ctx.fillRect(50,50,200,20)
    // 绘制填充的矩形(长度100)（水平方向起点一致）
    ctx.fillRect(50,100,100,20)
    // 绘制填充的矩形(长度300)（水平方向起点一致）
    ctx.fillRect(50,150,300,20)

    // 绘制填充的矩形(长度250)（水平方向起点0）
    ctx.fillRect(0,200,250,20)
</script>

PS：不在渐变方案坐标以内的颜色按0%和100%时的颜色填充（建议渐变方案起点和长度要和矩形一致）

5.绘制径向渐变的矩形

用到的API：
createRadialGradient(x0,y0,r0,x1,y1,r1)：方法创建放射状/圆形渐变对象。
x0/y0,r0为渐变开始的圆
x1/y1/r1为渐变结束的圆
addColorStop：

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    // 创建径向渐变方案（传入两个圆的坐标和半径）
    var radialGradient = ctx.createRadialGradient(200,150,20,200,150,100)
    // 设置渐变的颜色
    radialGradient.addColorStop(0,"red")
    radialGradient.addColorStop(1,"blue")
    // 使用渐变方案作为填充色
    ctx.fillStyle = radialGradient

    // 绘制矩形（与渐变方案大小，位置一致）
    ctx.fillRect(100,50,200,200)
</script>

PS：不在渐变方案坐标以内的颜色100%时的颜色填充（建议渐变方案起点和大小要和矩形一致）

原文地址：https://www.cnblogs.com/OrochiZ-/p/11643069.html