Keep Running

导航

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的点称为坐标原点，坐标图如下：

  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）方法，结果才会显示出来。

     

 

posted on 2012-05-11 19:01  Keep Running  阅读(2320)  评论(1)  编辑  收藏  举报