html5高级程序设计第二章之Canvas API上篇

  1. HTML5 Canvas概述:Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget).在Canvas出现之前,开发人员若要在浏览器中使用绘图API,只能使用Adobe的Flash和SVG(Scalable Vector Graphics,可伸缩矢量图形)插件,或者只有IE才支持的VML(Vector Markup Language,矢量标记语言),以及其他一些稀奇古怪的JavaScript技巧。假设我们要在没有canvas元素的条件下绘制一条对角线--听起来似乎很简单,但实际上如果没有一套二维绘图API的话,这会是一项相当复杂的工作。HTML5 Canvas能够提供这样的功能,对浏览器端来说此功能非常有用,因此Canvas被纳入了HTML5规范。起初,苹果公司曾暗示可能会为WHATWG(Web Hypertext Application Technology Working Group,Web超文本应用技术工作组)草案中的Canvas规范申请知识产权,这在当时引起了一些Web标准化追随者的关注。不过,苹果公司最终还是按照W3C的免版税专利权许可条款公开了其专利。
  2. 基本的Canval元素:<canvas></canvas>
  3. 使用Cancas编程,首先要获得其上下文(context)。接着在上下文中执行动作,最后将这些动作应用到上下文中
  4. Canvas坐标:从左上角开始,X轴沿水平方向(按像素向右延伸),Y轴沿垂直向下延伸。左上角坐标x=0,y=0的点称为坐标原点,坐标图如下:

    html5高级程序设计第二章之Canvas API上篇

  5. 使用HTML5 Canvas API
  • 检查浏览器支持情况:
    try{
    
    document.createElement("canvas").getContext("2d");
    
    document.getElementById("support").innerHTML = "HTML5 Canvas is support in your browser";//获取canvas元素及其绘图的上下文
    
    }
    
    catch(e){
    
      document.getElementById("support").innerHTML = "HTML5 Canvas is NOT support in your browser";
    
    }

     

  • 在页面中加入canvas:
    //显示出一块200*200像素的隐藏区域
    
    <canvas id="diagonal" style="border:1px solid;"  height="200" width="200"></canvas>

     

  • 在canvas中绘制一条对角线:
    <!DOCTYPE html>
    
    <html>
    
      <title>Diagonal line example</title>
    
    
    
      <canvas id="diagonal" style="border: 1px solid;"  width="200" height="200"> </canvas>
    
      <script>
    
            function drawDiagonal() {
    
                // 通过id取得canvas元素及其绘图上下文 
    
                var canvas = document.getElementById('diagonal');
    
                var context = canvas.getContext('2d');//获取一个二维上下文
    
    
    
                // 用绝对坐标来创建一条路径 
    
                context.beginPath();
    
                context.moveTo(70, 140);
    
                context.lineTo(140, 70);
    
    
    
                // 将这条直线绘制到canvas上
    
                context.stroke();
    
            }
    
    
    
            window.addEventListener("load", drawDiagonal, true);
    
      </script>
    
    </html>

    在画直线的过程中调用了三个方法-----beginPath moveTo和lineTo方法,传入这条线的起点和终点的坐标。从以上的例子中可以看出,canvas中所有的操作都是通过上下文对象来完成的。对上下文的很多操作都不会立即反映到页面上,beginPath,moveTo,以及lineTo这些函数都不会直接修改canvas的展示结果。canvas很多用于设置样式和外观的函数都不会直接修改显示结果。只有对路径应用绘制(stroke)或填充(fill)方法,结果才会显示出来。

     

 

你可能感兴趣的:(canvas)