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去代替,尽量做到见名知意,方便以后的开发与记忆。
  • 相关阅读:
    [学习笔记] numpy次成分分析和PCA降维
    [论文理解]关于ResNet的进一步理解
    [Pytorch] pytorch笔记 <三>
    [pytorch] 官网教程+注释
    [Pytorch] pytorch笔记 <二>
    [图像处理] 直方图均衡化原理
    [Markdown] 数学公式
    [Pytorch] pytorch笔记 <一>
    [pytorch] Pytorch入门
    [Python]面向对象近期笔记-super
  • 原文地址:https://www.cnblogs.com/Andylasy/p/4641767.html
Copyright © 2011-2022 走看看