1.<canvas>元素

<canvas id="tutorial" width="150" height="150"></canvas>

替换内容

<canvas>元素不同于在其中的<img>标签，就像<video>，<audio>，或者 <picture>元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"，在这些浏览器上你应该总是能展示替代内容。

<canvas id="stockGraph" width="150" height="150">

  current stock price: $3.15 +0.15

</canvas>

<canvas id="clock" width="150" height="150">

  <img src="data:images/clock.png" width="150" height="150" alt=""/>

</canvas>

</canvas> 标签不可省

2.渲染上下文（The rendering context）

WebGL 使用了基于OpenGL ES的3D上下文 ("experimental-webgl")

我们将会将注意力放在2D渲染上下文中

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。对于2D图像而言，如本教程，你可以使用 CanvasRenderingContext2D。

var canvas = document.getElementById('tutorial');

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

3.检查支持性

var canvas = document.getElementById('tutorial');

if (canvas.getContext){

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

  // drawing code here

} else {

  // canvas-unsupported code here

}

4.一个模板骨架

<html>

  <head>

    <title>Canvas tutorial</title>

    <script type="text/javascript">

      function draw(){

        var canvas = document.getElementById('tutorial');

        if (canvas.getContext){

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

        }

      }

    </script>

    <style type="text/css">

      canvas { border: 1px solid black; }

    </style>

  </head>

  <body onload="draw();">

    <canvas id="tutorial" width="150" height="150"></canvas>

  </body>

</html>

5.一个简单例子

<html>

 <head>

  <script type="application/javascript">

    function draw() {

      var canvas = document.getElementById("canvas");

      if (canvas.getContext) {

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

        ctx.fillStyle = "rgb(200,0,0)";

        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

        ctx.fillRect (30, 30, 55, 50);

      }

    }

  </script>

 </head>

 <body onload="draw();">

   <canvas id="canvas" width="150" height="150"></canvas>

 </body>

</html>

canvas 基础的更多相关文章

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

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

  2. canvas基础之旅

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

  3. canvas 基础知识整理（二）

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  4. canvas 基础知识整理（一）

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

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

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

  6. canvas 基础知识

    canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...

  7. canvas基础语法

    前面的话 canvas顾名思义是定义在浏览器中的画布.它不仅是一个普通的元素,更是一个强大的编程工具.它的出现已然超过了web基于文档的设计初衷,将网页这一形态的应用推向了另一个高度.利用canvas ...

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

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

  9. canvas基础动画示例

    canvas基础动画示例 本文主要用最简单的例子,展示canvas动画效果是如何实现的 动画效果,是一个球绕着一点旋转 const canvas = document.getElementById(' ...

  10. canvas基础学习

    /** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...

随机推荐

  1. C#继承的多态性

    C#继承的多态性 当一个类A派生出新类B时,这个基类A在新类B中可以表现为不同的类型:用作它自己的类型.基类型,或者在实现接口时用作接口类型,我们将这种情况称为多态性. C#中的每种类型都是多态性的, ...

  2. Login用户登录（Python实现）

    username_fault = "isuperSun" #程序存储用户名和密码 password_fault = " counts = 0 while counts&l ...

  3. 3.Netty的粘包、拆包（二）

    Netty提供的TCP数据拆包.粘包解决方案 1.前言 关于TCP的数据拆包.粘包的介绍,我在上一篇文章里面已经有过介绍. 想要了解一下的,请点击这里 Chick Here! 今天我们要讲解的是Net ...

  4. javaWeb CSS 图像签名

    <html> <head> <meta charset="utf-8" /> <title>CSS布局之图像签名</title ...

  5. vue学习笔记-:class

    当items.state为true时使用class='rad2state',否则为rad2(默认).

  6. java经常看见 jdk5 jdk1.5 —— jdk6 jdk1.6 这两者有什么区别吗？

    问.java经常看见 jdk5 jdk1.5 —— jdk6 jdk1.6 这两者有什么区别吗? 答:没有区别,jdk5 和 jdk1.5 所代表的意思是一样的,只是叫法不一样 关键字: jdk5 j ...

  7. python--re(匹配字符串)

    \d 匹配任何十进制数:它相当于类 [0-9]. \D 匹配任何非数字字符:它相当于类 [^0-9]. \s 匹配任何空白字符:它相当于类 [ fv]. \S 匹配任何非空白字符:它相当于类 [^ f ...

  8. 【Effective C++ 读书笔记】条款03： 尽量使用 const

    关键字const多才多艺,变化多端却不高深莫测. const 修饰指针 面对指针, 你可以指出 指针自身.指针所指物.或者两者都不是 const. 如果关键字 const 出现在星号左边,表示被指物是 ...

  9. CI 框架源码解析一之入口文件 index.php

    Index.php作为CI框架的入口文件,源码分析,自然而然由此开始.在源码分析的过程中,我们并不会逐行进行解释,而只解释核心的功能和实现,如果英文水平很好的话,读过index.php文件的英文注释之 ...

  10. spark streaming的应用

    今天我们讲spark streaming的应用,这个是实时处理的,类似于Storm以及Flink相关的知识点, 说来也巧,今天的自己也去听了关于Flink的相关的讲座,可惜自己没有听得特别清楚,好像是 ...