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

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

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

你的浏览器不支持HTML5 Canvas!

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

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

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

3、从canvas元素中获取一个2D上下文。

声明一个Canvas元素

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

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

绘 制

元素放置在页面中任何你想显示它的地方,例如放置在一个“

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

你的浏览器不支持HTML5 Canvas!

如果浏览器支持HTML5 Canvas元素,那么在“

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

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

2、获取canvas元素的引用。

返回HTML5 Canvas教程目录

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

中的文字会被忽略。如果浏览器不支持HTML5
Canvas元素,这些文字会被作为提示文字显示出来。

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

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

中。 在Canvas元素上绘制图形

你的浏览器不支持HTML5Canvas!

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

//1.等待页面DOM元素加载完毕。window.onload=function;}functiondrawExamples(){//2.获取canvas元素的引用。varcanvas=document.getElementById;//3.从canvas元素中获取一个2D上下文。varcontext=canvas.getContext;//4.从2D上下文中使用绘制函数绘制图形。context.fillStyle="#ff0000";context.fillRect;}

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

你可以将“

相关文章

网站地图xml地图