学习Canvas基础-绘制矩形(canvas软件教程)

学习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)事例一

推荐整理分享学习Canvas基础-绘制矩形(canvas软件教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:canvas需要学吗,canvas基础教程,canvas基础教程,canvas 教程,canvas软件教程,canvas入门,canvas入门,canvas入门教程,内容如对您有帮助，希望把文章链接给更多的朋友！

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>