入门讲解HTML5的画布功能（1）

标签：

　　个人认为在HTML5中画布功能其实并不实用，当然趋势是在FLASH不没落的情况下。通过学习我发现画布功能能够实现的东西非常有情调，但是前端人员也要有一定的审美和构思才能做出有意思的东西，因为canvas能提供的东西实在太少了。

　　当然在苹果抵制Flash的前提下，Flash的前景并不光明，这也给了我们前端人员更多的负担和机会。因为在这一块UI是没有我们对于HTML5来的熟悉的。下面就是我对HTML5学习过后的一个总结。

　　first part

　　首先，虽然口口声声是HTML5的内容，但是由于canvas本身是没有绘图能力的，所以我们的所有绘制工作都是在Java Scrip中完成的。（大骗子！！！）你的第一步是需要在body中建立一个canvas,通过CSS样式规定宽高，当然，要是能居中就更好看了。具体代码如下

<canvas id="myCanvas" width="200" height="100"></canvas>
　　这个呢就相当于你在当前HTML文档中的一张白纸了，你给宽高多少，这张“纸“就有多大。
　　second part
　　其次，我前面有说过canvas这个标签本身是没有绘图能力的，需要借用Java Scrip的力量。那么第二步就是写JS代码了。这里简单的给大家绘制一个红色的长方形。代码如下

<script type="text/javascript">
var canves=document.getElementById("myCanvas");
var context=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); 
</script>
需要注意的是这里虽然var了两个对象，但是仍然需要规范去写。不能用简单的ABC去代替，尽量做到见名知意，方便以后的开发与记忆。

入门讲解HTML5的画布功能（1）

标签：

原文地址：http://www.cnblogs.com/Andylasy/p/4641767.html