• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > Html5 Canvas初探学习笔记(4) -清除屏幕

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含Html5 ,Canvas,清除屏幕 等相关知识,匿名希望在学习及工作中可以帮助到您
有些时候,我们需要清除部分或者全部的屏幕,类似于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的本地存储
  • Define charset for HTML5 Doctype
  • HTML5 canvas如何绘制动态径向渐变
  • 如何使用HTML5 Canvas绘制动态线性渐变
  • HTML5 canvas如何实现马赛克的淡入淡出效果(代码)
  • HTML5 canvas中如何绘制图像
  • 如何使用HTML5 canvas实现图像的马赛克
  • html5 canvas实现简单的双缓冲
  • HTML5 Canvas 图形组合是如何实现的?附代码
  • HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解

相关文章

  • 2017-08-06html5 canvas实现圆形时钟代码分享
  • 2018-12-03HTML5的canvas绘制动态时钟,1秒刷新一次canvas,个人觉得有性能的问题,如果不这么做的话,有什么好的方法?
  • 2018-12-03H5学习之旅-H5的基本标签(2)
  • 2017-08-06编写html5时调试发现脚本php等网页js、css等失效
  • 2018-12-03html5整理
  • 2018-12-03基于HTML5 Canvas实现视频破碎重组特效
  • 2018-12-03什么是canvas离屏技术?canvas放大镜效果如何实现?
  • 2018-12-03html5大文件上传技术分享
  • 2018-12-03GitHub用户发起HTML5网页移植版《星际争霸》项目的图文详解
  • 2018-12-03细谈HTML 5新增的元素

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • h5页面如何调用摄像头代码分享
    • 如何通过HTML5触摸事件实现移动端简易进度条
    • html5新增加的标签有哪些
    • 如何在微信端html5页面调用分享接口
    • html5 的a标签 Href 拨电话的写法
    • html5使用canvas画三角形
    • HTML中使用SVG与SVG预定义形状元素介绍
    • HTML5添加鼠标悬浮音响效果不使用FLASH_html5教程技巧
    • 为什么人人网把 iOS 客户端从原生写成 HTML5,Facebook 却将半 HTML5 重写成原生?
    • 关于自动校验的文章推荐

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有