手机游戏开发学习笔记

图形学,cocos2d-x,unity,unreal.....

Html5 Canvas初探学习笔记(4) -清除屏幕
小满(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也随之改变,当然我们作画的东西也要重画一遍。

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

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


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bill_man/article/details/7385141
个人分类: html5
所属专栏: html5 canvas入门
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭