学习Canvas基础-绘制矩形

学习Canvas基础-绘制矩形

canvas提供了三个API，分别是：

• 1.绘制矩形 rect(起点X, 起点Y, 绘制的矩形width, 绘制的矩形height) 但该方法不会出实际效果，需要配合 fill（）和stroke（）方法让其显现。
• 2.绘制一个填充的矩形 fillRect(起点X, 起点Y, 绘制的矩形width, 绘制的矩形height)
• 3.绘制一个矩形的边框 strokeRect(起点X, 起点Y, 绘制的矩形width, 绘制的矩形height)
• 4.清除指定矩形区域，让清除部分完全透明 clearRect(起点X, 起点Y, 清除的矩形width, 清除的矩形height)

事例一

rect(起点X, 起点Y, 绘制的矩形width, 绘制的矩形height)
但该方法不会出实际效果，需要配合 fill（）和stroke（）方法让其显现。

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>//  获取canvas画布const canvas=document.querySelector('#cont')// 获取画布的应用上下文const ctx =canvas.getContext('2d')
   ctx.beginPath()//在x轴为100，y轴为100的位置绘制填充的正方形区域
   ctx.rect(100,100,100,100)
   ctx.fill()
   ctx.closePath()
   
   ctx.beginPath()//在x轴为300，y轴为300的位置绘制边框的正方形区域
   ctx.rect(300,300,100,100)
   ctx.stroke()
   ctx.closePath()</script>

事例二

绘制一个内部填充颜色的矩形
fillRect(起点X, 起点Y, 绘制的矩形width, 绘制的矩形height)

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>//  获取canvas画布const canvas=document.querySelector('#cont')// 获取画布的应用上下文const ctx =canvas.getContext('2d')//绘制矩形的方法，内部填充的画法
  ctx.beginPath()// 复合写法
  ctx.fillRect(100,100,300,300)//拆分写法// ctx.rect(100,100,300,300)// ctx.fill()
  ctx.closePath()</script>

事例三

绘制一个只有边框的矩形
strokeRect(起点X, 起点Y, 绘制的矩形width, 绘制的矩形height)

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>//  获取canvas画布const canvas=document.querySelector('#cont')// 获取画布的应用上下文const ctx =canvas.getContext('2d')// 简单说就是放下画笔
 ctx.beginPath()// 复合写法
 ctx.strokeRect(50,50,300,300)//拆分写法// ctx.rect(50,50,300,300)// ctx.stroke()// 抬起画笔结束当前绘制
 ctx.closePath()</script>

事例四

清除指定矩形区域，让清除的部分完全透明
clearRect(起点X, 起点Y, 清除的矩形width, 清除的矩形height)

<!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>//  获取canvas画布const canvas=document.querySelector('#cont')// 获取画布的应用上下文const ctx =canvas.getContext('2d')// 复合写法
   ctx.fillRect(100,100,300,300)//在x轴为200，y轴为200的位置清除边长为100的正方形区域
   ctx.clearRect(200,200,100,100);</script>