HTML5 canvas clearRect() 方法

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 clearRect() 方法。

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

定义和用法

clearRect() 方法清空给定矩形内的指定像素。

JavaScript 语法：

context.clearRect(x,y,width,height);

参数值

参数	描述
x	要清除的矩形左上角的 x 坐标
y	要清除的矩形左上角的 y 坐标
width	要清除的矩形的宽度，以像素计
height	要清除的矩形的高度，以像素计

实例

在给定矩形内清空一个矩形：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

ctx.clearRect(20,20,100,50); 清除的是一个方形区域

HTML5 canvas clearRect() 方法相关推荐

HTML5 canvas drawImage() 方法记录
浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 drawImage() 方法. 注释:Internet Explorer 8 或 ...
HTML5 Canvas clearRect清除问题--总是边缘清除不干净
在网页采用Canvas根据鼠标的移动来画矩形,当鼠标再次点击移动来画矩形的时候需要把之前的的矩形清空点,发现在清空的过程中总是边缘没有清空掉,发现同时用一下可以完全清空干净 function cl ...
html5 canvas 图片拼接,HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
代码如下: Document *{margin:0 auto;} .box{border: 1px solid #ccc;width:1205px;height:400px;margin:0 auto ...
HTML5 canvas fillText() 方法
实例使用 fillText(),在画布上写文本 "Hello world!" 和 "w3school.com.cn": JavaScript: var c=d ...
canvas clearRect后仍存在之前图像问题
画板clearRect后仍存在之前图像问题最近遇到的一个问题是: 利用onmousedown等鼠标按钮执行事件,在canvas画布上画出若干个图形后.要求点击某一个具体图形,能够将该图形从画布上清除 ...
HTML5 canvas 之 clip
今天学习HTML5 canvas clip() 方法时,发现其几乎都要与save()与restore()方法嵌套使用,不这样效果又达不到期望,故自己做了一下一些尝试,以加深理解. 1. 主要代码及效果 ...
HTML5 Canvas中 fillText() 和 strokeText() 的区别
前言 Canvas现在越来越多地被运用到我们的项目中了,所以对Canvas的研究也得跟上呀,不然就被时代抛弃了.这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 stroke ...
clear html5代码,用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
在现实世界中,我们使用画笔在画板上进行绘画:在html5 canvas中,我们同样可以使用canvas的画笔--CanvasRenderingContext2D对象在canvas上进行绘画.众所周知, ...
提高HTML5 canvas性能的几种方法
简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2D immediate mode graphic)的标准.许多开发者现在 ...

HTML5 canvas clearRect() 方法

浏览器支持

定义和用法

JavaScript 语法：

参数值

实例

HTML5 canvas clearRect() 方法相关推荐

最新文章

热门文章