小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man
有些时候,我们需要清除部分或者全部的屏幕,类似于j2me的setcilp函数,在html
canvas中有两种方法可以清除屏幕,一种是clearRect和整个屏幕宽度高度技巧。不同的是clearRect可以实现部分的屏幕的清除也可以实现清除全屏的方法,而重设屏幕宽高只能清除部分的屏幕。
如下代码就把整个圆清除了四分之一的圆:
首先画一个整个的圆,然后清除一个正方形。效果如下:
如果使用如下语句,就会清除屏幕:
context.clearRect(0,0,canvas.width,canvas.height);
另外有一种方法就是重新设置canvas的width和height。代码如下:
varwidth=canvas.width;
varheight=canvas.height;
canvas.width=width;
canvas.height=height;
这样做也可以清除屏幕,但是这样做有个缺点,就是所有的状态值都会回到默认值(颜色样式,线宽等),不会保留。
采用如下代码可以设置浏览器全屏,就是根据document.body获得浏览器宽高在设置
<linkhref="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也随之改变,当然我们作画的东西也要重画一遍。
如有错误,希望大家多多指正
下一篇继续研究绘制的高级功能
分享到:
相关推荐
html2canvas-1.0.0-rc.4版本
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
html5-canvas-rabbit-run-games-code 3d游戏 适应手机和PC
html5-canvas-border-pixel-progressbar源码
html2canvas 的 @1.0.0-rc.4 版本,兼容IOS13,npm install时候安装版本不对可以直接下载这个,选择dist内的js文件引入
html5-canvas-3d-earth-rotate.zip
html5-canvas-3d-line-avatar.zip
html5-canvas-520-love-cartoon-codes(jb51.net).rar
屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。 2.它只能正确渲染它理解的属性,这意味着有许多 CSS 属性不起作用; html2canvas官网...
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
javascrip canvas画布,实现动态背景。
canvas-js-动画-例子
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
判断浏览器是否支持canvas,具体代码如下: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
通过HTML5+Canvas开发详解(第2版),你将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画,而这些是开发交互式Web游戏的必备知识。 本书针对Canvas和HTML5技术的最新变动进行了更新,其中包含了大量清晰...
html5-canvas-web-图片涂鸦
今天我们要给大家分享一款基于HTML5的3D粒子动画,该动画主要在Canvas画布上绘制粒子形的文字和3D模型,并且实现2D粒子文字与3D粒子模型之间的转换动画。在转换过程中,粒子从被打散到重新组合,动画效果非常炫酷,...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...