zoukankan      html  css  js  c++  java
  • 入门讲解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去代替,尽量做到见名知意,方便以后的开发与记忆。
  • 相关阅读:
    被标记为事务的方法互相调用的坑(上)
    几种实现延时任务的方式(三)
    几种实现延时任务的方式(二)
    几种实现延时任务的方式(一)
    Windows AD日志分析平台WatchAD安装教程
    Django单元测试中Fixtures用法
    威联通(NAS)搭建个人图床
    centOS极简安装并启动ngnix
    【JS档案揭秘】第一集 内存泄漏与垃圾回收
    【JS简洁之道小技巧】第一期 扁平化数组
  • 原文地址:https://www.cnblogs.com/Andylasy/p/4641767.html
Copyright © 2011-2022 走看看