标签<canvas>的HTML5

新的标签是标签<canvas>的HTML5是不是在以前的版本，它可以用来绘制图形，并与在座。

标签<canvas>的需要一种脚本语言，例如JavaScript的支持，才能正常工作，并充分行使其潜力。

本文的目的是为了说明新标签的基本使用，但由实际例子不断采用先进的一些意见，我希望，将有利于学习。

的前提

作为一个在最好的画布绝对新颖性，是不是所有的浏览器支持，因此它可能在这篇文章中的示范例子并不正确显示。
试验进行了谷歌浏览器上，您有没有经历过任何问题。

使用标签<canvas>的

画布的标记共同使用非常简单，没有其他的HTML标签不同。
正式Canvas是一个简单的容器，因此，有一个开始标签（<canvas>的）和结束（</帆布>）：

 <canvas id="esempio" width="196" height="96">

 





元素不支持







 </帆布>

如果尺寸没有明确表示（使用属性的宽度和高度）分配到容器的大小是默认的，与身高300和150基本矩形。
id属性，当然，是没有必要，但在我看来，它始终是一个好主意，调用每个对象有一个唯一的参考正在页面上使用。

由<canvas>的和</帆布>的说明文字来表示部分分隔的图形时表示您的浏览器不支持。

与之前的实施细则开始测试用帆布简单的代码来测试现场的潜力：

 <canvas id="bandierina" width="180">高度=“100”>不支持</帆布>







 <script type="text/javascript">







 VAR帆布=的document.getElementById（'旗帜'）;







 VAR C = canvas.getContext（'2 D'）;







 c.fillStyle =“＃FF0000”;







 c.fillRect（0,0,180,100）;







 c.fillStyle =“＃FFFFFF”;







 c.fillRect（0,0,120,100）;







 c.fillStyle ='＃00FF00';







 c.fillRect（0,0,60,100）;







 </ SCRIPT>

在这个页面你可以看到这个代码（见输出正确，你必须有，再一次，一个浏览器，支持HTML 5）的结果。

由于已经在这部分代码是本文开头宣布明确的事实，油画作品使用脚本。 从这个例子中，我们可以立刻注意到的标准技术来提取对象画布背景变量：

 / /创建画布的项目ID







 VAR帆布=的document.getElementById（'旗帜'）;









 / /创建一个新的画布上的两维对象







 VAR C = canvas.getContext（'2 D'）;

使用Javascript getElementById方法存储在一个变量画布对象，通过它的id字段的值; 的getContext（'2 D'）采用的背景下，或对象，提供程序员的方法来与画布工作所需的（在我们的情况下，你要使用的二维图形功能，即2D）。

在下面的网页，我们将列出一些有用的程序员基本操作打算在画布的使用。

• <<
• 1
• 2
• 3
• 4
• 5
• >>