javascript方法：

var oC=document.querySelectorAll('canvas')[0];
oC.width=document.documentElement.clientWidth;
oC.height=document.documentElement.clientHeight;
//oC.width=window.innerWidth;
//oC.height=window.innerHeight;

css方法：

html,body{width:100%;height:100%;margin:0;overflow:hidden;}
body{background:#000;}
canvas{background:#fff;height:100%;width:100%;}

作者：smile.轉角

QQ：493177502

【html5】如何让Canvas标签自适应设备的更多相关文章

  1. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  2. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  3. Atitit html5 Canvas 如何自适应屏幕大小

    Atitit  html5 Canvas 如何自适应屏幕大小     可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...

  4. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  5. html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  6. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  7. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. HTML5<canvas>标签:简单介绍(0)

    <canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与c ...

  9. html5 canvas标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. js 日期格式转换（转载）

    1.当前时间转为 “yyyy-MM-dd HH:MM:SS” function getNowFormatDate() { var date = new Date(); var seperator1 = ...

  2. ubuntu16.04LTS更换阿里源

    ubuntu16.04LTS更换阿里源 sudo gedit /etc/apt/sources.list 替换:    # deb cdrom:[Ubuntu 16.04 LTS _Xenial Xe ...

  3. Java文件编译出现 “编码 GBK 的不可映射字符”

    俗话说,温故而知新.本打算用dos回忆一下基础知识,没想到把自己绊倒了. 用Dos,当然就要回归原始,用记事本啦.下面用一个小练习,演示我遇到的绊脚石.之后,解决了简直笑死. 报错: Java文件编译 ...

  4. Git实战手册(三): stash解惑与妙用

    0. 介绍 教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步原文地址 有空就来看看个人技术小站, 我一直都在 在实际项目开发中,总会遇到代码写到一半(没法去打commit),去开启新 ...

  5. Python3 系列之 编程规范篇

    编码规范 编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头部必须加入 #--coding:utf-8-- 标识 缩进 统一使用 4 个空格进行缩进 引号 自然语言 使用双引 ...

  6. blfs（systemd版本）学习笔记-编译安装openssh软件包

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! openssh项目地址:http://www.linuxfromscratch.org/blfs/view/stable/pos ...

  7. java.io.IOException No space left on device

    磁盘空间不足 1.df -k,发现程序所在的工作目录/data,居然到了100%. 1604050 free allocated Kb 535144219 used allocated Kb 100 ...

  8. JS中实现跨域的方法总结

    今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...

  9. 从零开始学习html（二）认识标签(第一部分)——下

    八.<blockquote>标签,长文本引用 <!DOCTYPE HTML> <html> <head> <meta http-equiv=&qu ...

  10. Android 时间与日期操作类

    获取本地日期与时间 public String getCalendar() { @SuppressLint("SimpleDateFormat") SimpleDateFormat ...