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

随机推荐

jQuery实现轮播切换以及将其封装成插件（3）
在前两篇博文中,我们写了一个普通的轮播切换.但是我们不能每一次需要这个功能就把这些代码有重新敲一次.下面我们就将它封装成一个插件. 至于什么是插件,又为什么要封装插件,不是本文考虑的内容. 我们趁着 ...
System.Web.UI.HtmlControls
用来创建一个标签.HtmlContainerControl 一般用此类来新建标签. 可能我们熟悉System.Web.UI.WebControls;空间.System.Web.UI.WebContro ...
django模板层(templates)
1.基础部分通过使用模板,就可以在URL中直接调用HTML,它还是松耦合的,灵活性强,而且更容易维护而且可以将变量通过一定的方式嵌入到HTML中,最终渲染到页面,总的来说基于模板完成了数据与用户之 ...
1、SpringBoot+MybatisPlus整合
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
javascript入门笔记2-window
1.JavaScript-输出内容(document.write) <script type="text/javascript"> document.write(&qu ...
jquery 筛选元素 (2)
.add() 创建一个新的对象,元素添加到匹配的元素集合中. .add(selector) selector 一个字符串表示的选择器表达式.找到更多的元素添加到匹配的元素集合. $("p&q ...
线段树的应用xx中学模拟lites
跟昨天那个自己写的,没有按照模板来的一看风格就不相类似,今天模拟赛的时候就是用的我的那个自己YY的代码,才拿了10分.个人认为关键的问题应该在于对于数据的处理太过繁琐了,所以回来之后,就拿了大佬的程序 ...
Unity基础
unity unity 3大场景 Asset Scene Component Asset :资源导入导出右击资源,选择导出Unity包导入可以直接将只有复制到Asset文件夹创建场景 File- ...
指定的参数已超出有效值的范围。参数名: site
“/”应用程序中的服务器错误. 指定的参数已超出有效值的范围.参数名: site 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的 ...
[CodeForces238E]Meeting Her（图论+记忆化搜索）
Description 题目链接:Codeforces Solution 因为路线随机,所以找出各路线最短路必须经过的点,在这个点必定能上车直接floyd暴力找割点然后不断用k条公交车路线来更新D ...