• 入门讲解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去代替,尽量做到见名知意,方便以后的开发与记忆。
  • 相关阅读:
    Servlet项目 创建方法
    1. 连接数据库
    Jsp application对象(全局变量)
    Jsp session属性、方法
    让python 3支持mysqldb的解决方法
    Python读写文件(进阶)
    python操作MongoDB
    使用Python Pandas处理亿级数据
    SurfingTheInternet
    matplotlib中日期显示(不显示为科学计数法)
  • 原文地址:https://www.cnblogs.com/Andylasy/p/4641767.html
Copyright © 2020-2023  润新知