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. System.Web

    如果 using System.Web:还是调用不出来其中的类,请在引用的位子添加 System.Web  引用,有的版本不自带这个命名空间. 类: HttpResponse类       用于绘画验 ...

  2. 谈谈对bug的一点想法，说说做好日志记录的重要性

    说起程序猿,总绕不开的一个话题就是bug,估计每个程序猿听到某某测试跑过来一脸淫笑的告诉你这个功能有个bug的时候,总有种恨不得掐死他的想法.其实程序猿跟bug的关系,感觉有点像父亲和儿子的关系,自己 ...

  3. JS - 简单的下载图片至本地

    <iframe id="saveImg" src="图片路径" style="display:none;"></ifram ...

  4. fastadmin 后台管理框架使用技巧(持续更新中)

    fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...

  5. 残留的linux相关笔记

    1. 设置网络环境1) 设置宿主机网络环境#ifconfig eth1 192.168.16.111 2) 设置开发板网络环境>pri>setenv ipaddr 192.168.16.2 ...

  6. C语言基础篇（二）运算符

    导航: 2.1 算数运算符 2.2 逻辑运算符 2.3 位运算 2.4 赋值运算 2.5 内存访问符号 ----->x<------------->x<------------ ...

  7. HyperLedger Fabric 1.4 比特币历史（1.1）

    比特币是一种数字货币,也是一种创新思维,把人们带入到一个无中心化.完全可信任.安全可靠的全新思维领域:一个叫“中本聪”的人或组织,使我们思维产生化学反应,他在2008年10月31日发表了比特币白皮书& ...

  8. POJ：2739-Sum of Consecutive Prime Numbers(尺取)

    Sum of Consecutive Prime Numbers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 27853 Ac ...

  9. POJ:3579-Median（二分＋尺取寻找中位数）

    Median Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9201 Accepted: 3209 Description Gi ...

  10. Permute Digits 915C

    You are given two positive integer numbers a and b. Permute (change order) of the digits of a to con ...