HTML5 Canvas 基本学习教程一_H5之家 - 中国HTML5教程资源分享第一站

canvas ，一个HTML5的元素. 通过使用JavaScript,可用于绘制图形，动画，图表，照片构图，或在飞行的任何其他可视化对象，。在本教程中，我们将描述如何在您的Web项目实施canvas 。支持的浏览器在我们开始我们的教程，让我们检查您的浏览器是否支持这种最新技术或没有。下面是正式帆布支持的浏览器列表： Internet Explorer (9.0+) Safari (3.0+) Firefox (3.0+) Chrome (3.0+) Opera (10.0+) iOS (1.0+) Android (1.0+) 开始使用通过观察canvas元素的本身,让我们开始学习之旅
<canvas>
<canvas>元素看起来像其他HTML元素。有2个重要的属性，你必须指定，就是的宽度和高度，（注：请指定使用画布本身，而不是CSS，宽度和高度，以防止任何扭曲的视觉问题）。此外，它应该需要id属性，它可以通过JavaScript访问。
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title> </head> <body> <canvas>  Sorry, your browser doesn't support canvas technology. </canvas> </body> </html> 坐标系统坐标系统是最重要的知识，你需要知道，在画布上绘制前之一。如果您已使用任何其他的2D图形编程语言之前，那么你就会熟悉标准的直角坐标系（0,0）在左上角，一切从左上角的计数系统。例如，如果您想将您的矩形右，你会增加你的X轴值;如果你想向下移动，你将不得不增加您的Y轴值。

HTML5 Canvas 基本学习教程一

简单的图形最初是空白的画布，显示的东西，你需要的JavaScript的帮助，为您绘制。canvas元素本身所具有的DOM方法，所谓的getContext，用于获取渲染上下文和绘图功能。的getContext（）接受一个参数，类型的上下文。在本教程中，我们将侧重于2D渲染上下文。 var myCanvas = document.getElementByIdx_x("myCanvas"); var ctx = myCanvas.getContext('2d');
OK，让我们在空白画布上绘制一个矩形：
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title> <script type="text/javascript"> function drawShape() { var myCanvas = document.getElementByIdx_x("myCanvas"); var ctx = myCanvas.getContext("2d"); ctx.fillRect(20, 20, 100, 100); } </script> </head> <body> <canvas>  Sorry, your browser doesn't support canvas technology </canvas> </body> </html>保存您的文档和支持的浏览器中预览它，你会看到一个黑色的矩形形状：

HTML5 Canvas 基本学习教程一