canvas教程

HTML5 Canvas学习教程:概览

字号+ 作者:H5之家 来源:H5之家 2016-12-11 14:00 我要评论( )

HTML5 Canvas元素允许我们在HTML5页面中的canvas区域自由的绘制图形。 让我们先来体验一下HTML5 Canvas。点击“绘制”按钮,它将会在下面的canvas区域绘制一些图形。 你的浏览器不支持HTML5 Canvas!绘 制 在这个例子中只显示了一些基本的可以在HTML5 Canvas

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

61.png

让我们先来体验一下HTML5 Canvas。点击“绘制”按钮,它将会在下面的canvas区域绘制一些图形。

你的浏览器不支持HTML5 Canvas!绘 制

在这个例子中只显示了一些基本的可以在HTML5 Canvas中绘制的图形。通过后面文章的介绍,你可以绘制出更多的高级复杂的图形。

HTML5 Canvas元素本身是一个HTML元素,用于在Canvas上工作的API是javascript API。我们将在后面的文章中逐一对其进行介绍。

声明一个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>中。

在Canvas元素上绘制图形

在HTML5 Canvas上绘制图形是一种即时模式(immediate mode)。所谓的即时模式是指一旦在Canvas上绘制了图形之后,Canvas将不再知道这个图形的任何信息。被绘制的图形是可见的,但是你不能够操作这个图形。它就像一块正真的画布,在你绘制图形之后,留在上面的只是一些颜色(像素)。

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

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

下面是一个简单的例子,它遵从了上面的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上下文中使用绘制函数来绘制图形了。

下面是上面代码的返回结果。

你的浏览器不支持HTML5 Canvas! 返回HTML5 Canvas教程目录

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Canvas 16破解及安装教程

    Canvas 16破解及安装教程

    2016-12-11 13:01

  • html5 canvas简短的流星雨、星星动画特效代码

    html5 canvas简短的流星雨、星星动画特效代码

    2016-12-11 10:00

  • 媲美Surface Pro4?Vaio Z Canvas平板

    媲美Surface Pro4?Vaio Z Canvas平板

    2016-12-10 18:01

  • html5 canvas 全屏五彩绽放的烟花动画效果代码

    html5 canvas 全屏五彩绽放的烟花动画效果代码

    2016-12-05 15:03

网友点评