电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

Html5 Canvas;还有进修笔记(4) -扫除屏幕

2020-09-04 13:45:06 出处:[ 菜菜电脑网 ] 人气:次阅读
有些时候,我们必需扫除部分或者全部的屏幕,类似于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成之努力学习笔记(4) -清洗屏幕 的内容,更多系统性内容劝注意PHP中文网(www.php.cn)!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152
备案号:苏ICP备19057673号-2