canvas 基础

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 基础的更多相关文章

HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
canvas基础之旅
canvas 主要使用2D rendering context API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...
canvas 基础知识整理（二）
html部分: <canvas id="myCanvas" width="800" height="800" ></can ...
canvas 基础知识整理（一）
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
canvas 基础知识
canvas 基础低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...
canvas基础语法
前面的话 canvas顾名思义是定义在浏览器中的画布.它不仅是一个普通的元素,更是一个强大的编程工具.它的出现已然超过了web基于文档的设计初衷,将网页这一形态的应用推向了另一个高度.利用canvas ...
canvas API ，通俗的canvas基础知识（一）
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
canvas基础动画示例
canvas基础动画示例本文主要用最简单的例子,展示canvas动画效果是如何实现的动画效果,是一个球绕着一点旋转 const canvas = document.getElementById(' ...
canvas基础学习
/** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...

随机推荐

path、classpath理解
path.classpath最常见的场景:环境变量配置 path环境变量:设置path的作用是让操作系统可以找到JDK命令(指定了JDK命令搜索路径):path环境变量原来Windows里面就有,只需 ...
C#操作Word，写数据，插入图片
本篇介绍的是如何在C#中往word里面写入数据. 如何在线的操作文档: c#在线操作文档关于Aspose.Word控件的介绍,请戳→ 介绍首先需要去下载这个dll文件,然后引用到你的项目当中.地 ...
HDU2837 Calculation(扩展欧拉定理)
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
Latex 使用笔记，取消目录
不使用标准模板(如ieee或者acm的模板)的前提下: \usepackage{hyperref} \hypersetup{bookmarks={false}} 或者 \usepackage[book ...
想学习一下node.js,重新安装配置了node
根据这个网站上的教程安装配置的,还不错一次就成功了.觉得安装没什么,就是配置路径的时候容易错. http://www.runoob.com/nodejs/nodejs-install-setup.ht ...
HTML5--定义区块
1.效果图如下: 备注: <article> 1.作用:用来表示文档.页面中独立的.完整的.可以独自被外部引用的内容 2.一般有个header元素,有时还有脚注 <article&g ...
Python__关于列表的引用以append操作为例
对于列表这样的可变类型来说,对它操作是不会改变内存地址的. 若列表里面存的元素是整数这样的不可变类型,若修改这个元素那地址还是会改变,如: >>> a = [,,] >> ...
./vi: line 2: mkdir: command not found
当前两天博主在写脚本的时候,运行脚本时候总是出现此消息,很郁闷, 开始我以为可能是我mkdir的函数库依赖的问题,但是当我用其他的脚本创建目录的时候,命令又可以用了,找了半天,终于找到了答案 --- ...
keil5的安装及问题
win8+keil 注意,在进行破解的时候首先要打开一个工程,而且keil要用管理员的身份进行运行, 才可以破解完成发现打开之后,出现这样的错误. 原因是因为在创建工程的时候在下图中点了是,要点否才 ...
003---wsgi和wsgiref模块
WSGI: 全称:Web Server Gatway Interface ,web服务网关接口,独立的,与django无关,他们俩只是遵循一个约定,是一个协议. wsgiref模块: 实现了WSGI协 ...