canvas(三)绘制矩形

时间:2019-10-09
本文章向大家介绍canvas(三)绘制矩形,主要包括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%时的颜色填充(建议渐变方案起点和大小要和矩形一致)

$flag 上一页 下一页