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. S5PV210 时钟体系分析

    S5PV210 时钟体系 如下面时钟结构图所示,S5PV210 中包含 3 大类时钟域, 分别是主系统时钟域(简称 MSYS).显示相关的时钟域(简称 DSYS). 外围设备的时钟域(简称 PSYS) ...

  2. VirtualBox centos7扩容

    有时候扩容还真不如重新建立一个大硬盘的系统,但是如果你安装了好多东西的话,那还是来扩容一下吧. 查看磁盘格式           在virtualBox中右键点击虚拟机->设置->存储,如 ...

  3. 初始mvc4(一) 新建项目

    mvc4和mvc4.5基本大同小异,vs2012中已经集成了mvc,不需要手动安装了,现在就来看看如何新建mvc项目 一.首先打开vs2012,新建项目,选中web中mvc4 二.选择项目模板 这里面 ...

  4. 解决默写浏览器中点击input输入框时，placeholder的值不消失的方法

    html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...

  5. 【Redis】4、Redis学习资料

    Redis 集群规范 http://www.redis.cn/topics/cluster-spec.html Redis 集群教程 http://www.redis.cn/topics/cluste ...

  6. 深入理解Java虚拟机--阅读笔记三

    垃圾收集器 手机算法是内存回收的方法论,垃圾收集器是内存回收的具体实现. 并行:指多条垃圾收集线程并行工作,但此时用户线程仍然处于等待状态 并发:值用户线程与垃圾收集线程同时执行(但并不一定是并行的) ...

  7. Django Rest Framework之用户频率/访问次数限制

    内置接口代码基本结构 settings.py: REST_FRAMEWORK = { 'DEFAULT_THROTTLE_CLASSES':['api.utils.mythrottle.UserThr ...

  8. Graphviz的安装 - windows环境下

    1. 官网下载 http://www.graphviz.org/ 往下拉,选择这一个 点进去,选择msi文件下载 下载完成之后,直接双击运行即可 安装完成之后要配置环境变量 2. 配置环境变量 将gr ...

  9. 关于html5中的 网页图标问题

    在html5 中 设置网页图标的语句<link rel="icon" type="image/x-icon" href="favicon.ico ...

  10. python爬虫入门---第三篇：保存一张图片

    import requests import os url = 'http://imgsrc.baidu.com/forum/w%3D580%3B/sign=749ed018cecec3fd8b3ea ...