1、Css部分

.canvas_box {display: flex;justify-content: center;align-items: center;
}.canvas {border: 1px solid #777;
}

2、Html部分

<div class="canvas_box"><canvas class="canvas" id="idCanvas" width="100" height="100"></canvas>
</div>

3、JavaScript部分

function clearSpecificRectangle() {// 获取画布let idCanvas = document.getElementById('idCanvas');// 用于验证浏览器是否支持canvas，// 它是h5的新特性，老版本ie不支持if (!idCanvas.getContext) return alert('浏览器不支持！');// 画笔，可选2d和3dlet ctx = idCanvas.getContext("2d");// 填充颜色ctx.fillStyle = "rgba(0, 0, 200, 0.5)";// 绘制一个矩形，清除特定矩形，绘制边框ctx.fillRect(10, 10, 80, 80);// 清除特定矩形ctx.clearRect(20, 20, 60, 60);// 绘制矩形边框ctx.strokeRect(25, 25, 50, 50);
}
clearSpecificRectangle();

4、效果演示

4.1、微信小程序码

4.2、普通二维码

5、相关链接

CSDN-前端装逼必备–Canvas

Html5之canvas清除特定矩形、getContext、fillStyle、fillRect、clearRect、strokeRect相关推荐

HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و HTML5中最有意思的就是这个canvas了通过它我们可以画自己想要的图形它也是十分重要的技术应用于游戏.图表等等或者绘 ...
矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制 ...
html清除矩形边区域,canvas清除矩形指定颜色
html> canvas{ background: dodgerblue; } //获得画板 var nntt = document.getElementById("nntt" ...
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法发布时间:2020-08-29 11:23:12 来源:亿速云阅读:102 作者:小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图.本次将要学习一种新的灰土方法--使用Canvas元素,它是基于HTML5原生的绘图功能.使用Canvas元素,可以绘制图形, ...
HTML5 Canvas中绘制矩形
绘制矩形上一节,我们使用lineTo()方法绘制一个封闭的矩形.其实,canvas的API提供了rect()方法可以绘制矩形.rect()方法是路径方法,它会把指定的矩形添加到当前路径的子路径中.它 ...
HTML5之Canvas标签简要学习
HTML5 提供了画布(canvas)标签,通过与Javascript结合使用,可以在网页上绘制图像.Canvas是一个矩形区域,使用Javascript可以控制其每一个像素.本文将对canvas标签 ...
java 怎么清除画布_HTML5 Canvas 清除画布
HTML5 Canvas 清除画布 HTML5 Canvas clearRect()的使用方法,2D上下文功能clearRect()用于清除画布的矩形.清除的矩形变为透明. 在线示例 2D上下文功能c ...
HTML5：canvas基础
HTML特性(canvas)01 canvas是一个可以用脚本(JavaScript)再其中绘制图形的html元素,是html5中新曾元素. 注意:canvas不支持再IE9一下的浏览器执行初步使用 ...

Html5之canvas清除特定矩形、getContext、fillStyle、fillRect、clearRect、strokeRect

目录

1、Css部分

2、Html部分

3、JavaScript部分

4、效果演示

4.1、微信小程序码

4.2、普通二维码

5、相关链接

Html5之canvas清除特定矩形、getContext、fillStyle、fillRect、clearRect、strokeRect相关推荐

最新文章

热门文章