<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            html,body{

                height: %;

                overflow: hidden;

            }

            body{

                background: pink;

            }

            #test{

                background: gray;

                position: absolute;

                left: ;

                top: ;

                right: ;

                bottom: ;

                margin: auto;

            }

        </style>

    </head>

    <body>

        <canvas id="test" width="" height="">

            <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>

        </canvas>

    </body>

    <script type="text/javascript">

        window.onload=function(){

            //querySelector身上有坑

            //拿到画布

            var canvas = document.querySelector("#test");

              alert(canvas);

            if(canvas.getContext){

                var ctx = canvas.getContext("2d");

            }

        }

    </script>

</html>

canvas基础用法

1.什么是canvas(画布)
<canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形
例如，它可以用于绘制图形，创建动画。<canvas> 最早由Apple引入WebKit
我们可以使用<canvas>标签来定义一个canvas元素
----->使用<canvas>标签时，建议要成对出现，不要使用闭合的形式。
----->canvas元素默认具有高宽
width： 300px
height：150px

2.替换内容
<canvas>很容易定义一些替代内容。由于某些较老的浏览器（尤其是IE9之前的IE浏览器）
不支持HTML元素"canvas"，
但在这些浏览器上你应该要给用户展示些替代内容。
这非常简单：我们只需要在<canvas>标签中提供替换内容就可以。
--->支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。
--->不支持<canvas>的浏览器会显示代替内容

3.canvas标签的两个属性
<canvas> 看起来和 <img> 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。
实际上，<canvas> 标签只有两个属性—— width和height。这些都是可选的。
当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。

画布的高宽
html属性设置width height时只影响画布本身不影画布内容
css属性设置width height时不但会影响画布本身的高宽，
还会使画布中的内容等比例缩放（缩放参照于画布默认的尺寸）

4.渲染上下文
<canvas> 元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，
我们需要找到它的渲染上下文
<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。
getContext()只有一个参数，上下文的格式
----->获取方式
var canvas = document.getElementById('box');
var ctx = canvas.getContext('2d');

----->检查支持性
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}

canvas基础用法的更多相关文章

  1. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  2. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  3. HTML5 Canvas阴影用法演示

    HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...

  4. canvas API ，通俗的canvas基础知识（一）

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  5. PropertyGrid控件由浅入深(二)：基础用法

    目录 PropertyGrid控件由浅入深(一):文章大纲 PropertyGrid控件由浅入深(二):基础用法 控件的外观构成 控件的外观构成如下图所示: PropertyGrid控件包含以下几个要 ...

  6. canvas基础之旅

    canvas 主要使用2D rendering context  API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...

  7. logstash安装与基础用法

    若是搭建elk,建议先安装好elasticsearch 来自官网,版本为2.3 wget -c https://download.elastic.co/logstash/logstash/packag ...

  8. elasticsearch安装与基础用法

    来自官网,版本为2.3 注意elasticsearch依赖jdk,2.3依赖jdk7 下载rpm包并安装 wget -c https://download.elastic.co/elasticsear ...

  9. BigDecimal最基础用法

    BigDecimal最基础用法 用字符串生成的BigDecimal是不会丢精度的. 简单除法. public class DemoBigDecimal { public static void mai ...

随机推荐

  1. 44-Ubuntu-用户管理-09-chmod的数字表示法介绍

    chmod 修改文件和目录权限 chmod在设置权限时,可以简单地使用三个数字分别对应拥有者/组和其他用户的权限. 注意: chmod直接修改文件|目录的'读|写|执行'权限,但是不能精确到拥有者|组 ...

  2. 41-Ubuntu-用户管理-06-su切换用户

    su 切换用户 序号 命令 作用 说明 01 su - 用户名 切换用户,并且切换家目录 '-'可以切换到用户家目录,否则保持位置不变 02 exit 退出当前登录账户 返回上一级用户 图:su与ex ...

  3. 使用Swagger2Markup归档swagger生成的API文档

    文章出处: http://blog.didispace.com/swagger2markup-asciidoc/ 说明 项目中使用Swagger之后,我们能够很轻松的管理API文档,并非常简单的模拟接 ...

  4. pyJWT

    现在用JWT 加密太火了,怎么能不跟上潮流?否则销售都不好意思出去吹牛逼! PyJWT是一个Python库,用来编码/解码JWT(JSON Web Token)的 1.定义:根据维基百科的定义,JSO ...

  5. OpenResty实现限流的几种方式

      在开发 api 网关的时,做过一些简单的限流,比如说静态拦截和动态拦截:静态拦截说白了就是限流某一个接口在一定时间窗口的请求数.用户可以在系统上给他们的接口配置一个每秒最大调用量,如果超过这个限制 ...

  6. Windows跳板机无法共享本地主机剪贴板

    我的跳板机是Windows 2003 ,总是无法共享本地的剪贴板,我一般是在本地编辑SQL或者一些脚本,然后粘贴到跳板机中. 如果碰到无法共享本地剪贴板的情况,可以尝试按照以下步骤解决: 开始 -- ...

  7. docker Dockerfile学习---构建apache环境

    1.创建目录,上传包 创建项目目录 $ mkdir apache_php $ cd apache_php 把包下载后放到服务器该目录下 $ ls apr-....tar.gz 2.创建Dockerfi ...

  8. 2变量与基本类型之const限定符

    一.const介绍: const对象一旦被创建其值就不能再改变,所以const对象必须初始化.任何试图对const赋值的行为都会引发错误. 二.初始化和const: 对const对象的主要限制就是只能 ...

  9. spark运行任务报错：Container [...] is running beyond physical memory limits. Current usage: 3.0 GB of 3 GB physical memory used; 5.0 GB of 6.3 GB virtual memory used. Killing container.

    spark版本:1.6.0 scala版本:2.10 报错日志: Application application_1562341921664_2123 failed 2 times due to AM ...

  10. 1.MySQL基础架构

    好久没发博客了,终于又学完了一点知识并且进行了整理.就从这个MySQL系列开始继续坚持每个月产出几篇. 声明一下,这次的MySQL系列是针对已有一定基础的小伙伴的,关于SQL的使用,一些概念的介绍就不 ...