Html5 Canvas初探学习笔记(4) -清除屏幕

原创 2012年03月22日 22:05:37
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man

有些时候,我们需要清除部分或者全部的屏幕,类似于j2mesetcilp函数,在html

canvas中有两种方法可以清除屏幕,一种是clearRect和整个屏幕宽度高度技巧。不同的是clearRect可以实现部分的屏幕的清除也可以实现清除全屏的方法,而重设屏幕宽高只能清除部分的屏幕。

如下代码就把整个圆清除了四分之一的圆:

首先画一个整个的圆,然后清除一个正方形。效果如下:


如果使用如下语句,就会清除屏幕:

context.clearRect(0,0,canvas.width,canvas.height);

另外有一种方法就是重新设置canvaswidthheight。代码如下:

var width = canvas.width;

var height = canvas.height;

canvas.width = width;

canvas.height = height;

这样做也可以清除屏幕,但是这样做有个缺点,就是所有的状态值都会回到默认值(颜色样式,线宽等),不会保留。

采用如下代码可以设置浏览器全屏,就是根据document.body获得浏览器宽高在设置


<link href = "canvas.css" rel="stylesheet" type="text/css">

这句话是引入csscss的作用是忽略浏览器的留白和边界,css的代码如下:

* {margin:0;padding:0}

html,body{height:100%;width:100%}

canvas {display:block;}

为了当屏幕大小改变时我们的这个设置依然是全屏,我们在window.addEventListener("load", paint, true);后加上这么一句:window.addEventListener("resize", paint, true);也就是当我们改变浏览器大小时canvas也随之改变,当然我们作画的东西也要重画一遍。

如有错误,希望大家多多指正

下一篇继续研究绘制的高级功能


版权声明:本文为博主原创文章,未经博主允许不得转载。

html5 canvas清空画布方法

总结以下三种清空canvas画布的方式: 1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: [javascr...
  • Inuyasha1121
  • Inuyasha1121
  • 2016年12月29日 11:31
  • 8899

html5学习 - canvas画图和清除图片

在canvas上画一张图其实很简单,就是用drawImgage函数。定义这里先贴上w3c里的定义和用法: JavaScript 语法 1 (在画布上定位图像:) context.drawImage(i...
  • chenfs1992
  • chenfs1992
  • 2015年06月14日 13:03
  • 7619

Canvas清空当前画布方法

Canvas想要清空当前画布的方法很简单 使用 obj.clearRect(x,y,width,height); 四个参数意思是想要清空哪个坐标点,宽高多少的画布面积; ...
  • itSeven7
  • itSeven7
  • 2017年04月20日 15:00
  • 2426

canvas中的清空画布

使用下面方法: 1. context.clearRect(x,y,width,height); 2. save() 和 restore() 3. getImageData()和putIma...
  • hui1yuan
  • hui1yuan
  • 2017年09月12日 11:00
  • 315

html5清空画布方法

总结以下三种清空canvas画布的方式: 1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: function clearCanvas() ...
  • u010484625
  • u010484625
  • 2015年05月27日 14:16
  • 21920

Android 如何清空 Canvas ?(找了好久的答案)

Android 如何清空 Canvas ? 似乎一直未找到好的解决办法,有的方法限制使用纯色背景,但无论怎么尝试,都未见效果, 终于在 http://stackoverflow.com/quest...
  • yuanlong_zheng
  • yuanlong_zheng
  • 2012年05月22日 20:55
  • 34884

html5清除canvas画布内容

昨天在HMTL5的交流群中有人问“用context.drawImage(img,10,0);后怎么清除画进去的这张图”! 本人刚好知道2种方法,考虑到现在HTML5还不是很普及,可能有的人需要,...
  • junpengbuxingjia
  • junpengbuxingjia
  • 2014年08月21日 20:08
  • 1067

清除canvas的任何图形

对 clearRect 方法的理解
  • nzyalj
  • nzyalj
  • 2017年02月12日 14:25
  • 223

canvas画布清空问题

清除Canvas任意区域像素可以用canvas_context.clearRect(x, y, width, height),但如果只有一个Canvas,不同的方法都调用同一个Canvas时,只调用c...
  • DaiDaiLiu
  • DaiDaiLiu
  • 2015年05月12日 14:02
  • 7039

Android 清除canvas内容

画新的东西之前需要先清除画布内容: 方法1: canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); 方法2 Paint ...
  • heiding215
  • heiding215
  • 2014年02月14日 13:42
  • 17925
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html5 Canvas初探学习笔记(4) -清除屏幕
举报原因:
原因补充:

(最多只允许输入30个字)