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. 你不知道的Linux（持续更新中）

    1.关于GNU.Linux.GNU/Linux三者的关系 GNU 项目创始于一九八四年,旨在开发一个类似 Unix ,且为自由软件的完整的操作系统: GNU 系统.(也可把GNU看成一个自由软件工程) ...

  2. angularjs通过ng-change和watch两种方式实现对表单输入改变的监控

    angularjs通过ng-change和watch两种方式实现对表单输入改变的监控 直接上练习代码 <!DOCTYPE html> <html xmlns="http:/ ...

  3. WebFrom 小程序【条件查询与分页整合】

    将前面的条件查询功能与分页显示整合到一个页面中 <%@ Page Language="C#" AutoEventWireup="true" CodeFil ...

  4. 单机安装Hadoop

    单机安装hadoop ------------------------------------------------------------------ 操作系统:centos7 64 位 hado ...

  5. 【Java每日一题】20161205

    package Dec2016; import java.util.HashSet; public class Ques1205 { public static void main(String[] ...

  6. HibernateTemplate的用法以及作用

    HibernateTemplate作用:从字面上意思我们就知道他是一个模板,然后我们又知道hibernate是一个对象关系映射的框架,所以我们很容易联想到他的功能就是将Hibernate 的持久层访问 ...

  7. java_二进制的前导的零

    题目内容: 计算机内部用二进制来表达所有的值.一个十进制的数字,比如18,在一个32位的计算机内部被表达为00000000000000000000000000011000.可以看到,从左边数过来,在第 ...

  8. PHP FastCGI进程管理器PHP-FPM的架构

    一个master进程,支持多个pool,每个pool由master进程监听不同的端口,pool中有多个worker进程.每个worker进程都内置PHP解释器,并且进程常驻后台,支持prefork动态 ...

  9. html页面边框的简单设置方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. SpringBoot注解验证参数

    SpringBoot注解验证参数 废话不多说,直接上表格说明: 注解 作用类型 解释 @NotNull 任何类型 属性不能为null @NotEmpty 集合 集合不能为null,且size大于0 @ ...