Html5 Canvas初探学习笔记(4) -清除屏幕
来源:互联网 发布:php在线支付 编辑:程序博客网 时间:2024/05/20 12:24
有些时候,我们需要清除部分或者全部的屏幕,类似于j2me的setcilp函数,在html
canvas中有两种方法可以清除屏幕,一种是clearRect和整个屏幕宽度高度技巧。不同的是clearRect可以实现部分的屏幕的清除也可以实现清除全屏的方法,而重设屏幕宽高只能清除部分的屏幕。
如下代码就把整个圆清除了四分之一的圆:
首先画一个整个的圆,然后清除一个正方形。效果如下:
如果使用如下语句,就会清除屏幕:
context.clearRect(0,0,canvas.width,canvas.height);
另外有一种方法就是重新设置canvas的width和height。代码如下:
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">
这句话是引入css,css的作用是忽略浏览器的留白和边界,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初探学习笔记(4) -清除屏幕
- Html5 Canvas初探学习笔记(6) -变换
- Html5 Canvas初探学习笔记(7) -合成
- Html5 Canvas初探学习笔记(8) -阴影
- Html5 Canvas初探学习笔记(9) -渐变
- Html5 Canvas初探学习笔记(1)-画一个矩形
- Html5 Canvas初探学习笔记(2) -绘制深入
- Html5 Canvas初探学习笔记(5) -绘图状态
- Html5 Canvas初探学习笔记(10) -复杂路径
- Html5 Canvas初探学习笔记(11) -简易图片操作
- Html5 Canvas初探学习笔记(12) -图片裁减和调整
- Html5 Canvas初探学习笔记(13) -图片变换
- Html5 Canvas初探学习笔记(14) -简单动画实现
- Html5 Canvas初探学习笔记(15) -鼠标事件
- html5 canvas 学习笔记
- html5学习笔记 -- canvas
- HTML5学习笔记------Canvas
- html5 canvas 学习笔记
- eWebEditor文件上传路径的应用
- Ext JS更改ProgressBarPager的长度
- asp.net ajax 留言板
- eclipse/myeclipse注释模板的修改
- 《80x86汇编语言程序设计》保护模式第一个例题
- Html5 Canvas初探学习笔记(4) -清除屏幕
- 制作.BAT 文件名
- g++如何编译多个原文件和头文件
- JAVA的内省机制(introspector)与反射机制(reflection)
- 几个不错的VC编程学习网站
- 炫彩界面库v1.4.2-360安全卫士v8.5-UI设计器使用教程
- 跟随鼠标旋转背景
- FCKeditor使用方法技术详解
- 自然对数e都不知道是啥了啊?