初步了解Canvas

 

<--------一些理论储备： --------------------------------------------------------------------------------------------------------------------------------->

HTML5 Canvas元素允许我们在HTML5页面中的canvas区域自由的绘制图形。

 

在HTML5 Canvas上绘制图形是一种即时模式（immediate mode）。

所谓的即时模式是指一旦在Canvas上绘制了图形之后，Canvas将不再知道这个图形的任何信息。被绘制的图形是可见的，但是你不能够操作这个图形。

就像一块正真的画布，在你绘制图形之后，留在上面的只是一些颜色（像素）。

这是Canvas和SVG不同的地方是，SVG图形可以被单独操纵的，也可以被重新绘制。在HTML5 canvas中如果你想修改绘制的图形，你需要重新绘制所有的东西。

 

 

<--------代码走起-------------------------------------------------------------------------------------------------------------------------------------->

 

总的来说有两大步，第一步，先在页面上定义canvas元素，第二步就是对canvas进行绘制。

 

第一步：

现在，让我们来看看如何在HTML页面中声明一个Canvas元素。

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">

    你的浏览器不支持HTML5 Canvas！

</canvas>

上面的代码声明了一个Canvas元素，它的宽度为500，高度为150，并且设置了1个像素的灰色描边。

如果浏览器支持HTML5 Canvas元素，那么在<canvas>中的文字会被忽略。如果浏览器不支持HTML5 Canvas元素，这些文字会被作为提示文字显示出来。

我们可以将<canvas>元素放置在页面中任何想要显示它的地方，例如放置在一个<div>中。

 

第二步：

要想在HTML5 canvas中绘制各种图形，需要使用javascript。下面是绘制的步骤：

• 1、等待页面DOM元素加载完毕。
• 2、获取canvas元素的引用。
• 3、从canvas元素中获取一个2D上下文（context）。
• 4、从2D上下文中使用绘制函数绘制图形。

下面是一个简单的例子，它遵从了上面的4个步骤来在canvas中绘制一个矩形。

<script>

    // 1. 等待页面DOM元素加载完毕。

    window.onload = function() {

        drawExamples();

    }

 

    function drawExamples(){

     

        // 2. 获取canvas元素的引用。

        var canvas  = document.getElementById("ex1");

 

        // 3. 从canvas元素中获取一个2D上下文（context）。

        var context = canvas.getContext("2d");

 

        // 4. 从2D上下文中使用绘制函数绘制图形。

        context.fillStyle = "#ff0000";

        context.fillRect(10,10, 100,100);

    }

</script>                             

在上面的代码中，首先在window对象中添加了一个事件监听。这个事件监听函数在页面页面加载完成之后被执行。这个函数会调用一个已经定义好的函数drawExamples()。

接着，drawExamples()函数通过document.getElementById()方法获取canvaas元素的引用。然后，通过在canvas引用上执行getContext("2d")方法获取一个2D上下文。

最后，就可以在这个2D上下文中使用绘制函数来绘制图形了。

 

 

 

 

 

 

 From:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201507092199.html