zoukankan      html  css  js  c++  java
  • HTML5学习—Canvas API入门

    1.HTML5 Canvas 发展历史

    在Canvas出来之前,开发人员要在浏览器中绘图,必须使用Adobe的Flash或者SVG(Scalable Vector Graphices,可缩放矢量图形)插件。但是HTML5 Canvas出来之后,很多动态生成或者展示图形、图表、图像或者动画的功能都由Canvas来完成。同时开发人员会用SVG和Canvas进行比较,因为SVG在很多场合下比Canvas优秀。

    Canvas的缺点:用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间

    Canvas的优点:

    1.不需要将所有绘制的图像中的每个元素当做对象存储,因此执行性能非常好

    2.Canvas API可以实现其他编程语言上二维绘图API。而已使用Three.js可以实现三维绘图的功能

    2.Canvas基本概念

    <canvas></canvas> 默认创建一个宽度为300px,高度为150像素的矩形区域。通过获取上下文(context),执行一些动作,可以完成图形的绘制和动画功能。canvas只是一个标签,后面强大的功能是通过Javascript API完成。canvas中的坐标是左上角开始,x轴沿着水平方向向右延伸,y轴沿着垂直方向向下延伸。和CSS中坐标体系一致。

    image

    处理老的浏览器不支持HTML5 Canvas元素的问题,可以在canva标签里面添加内容,当然也可以使用Modernizr 类库进行不同浏览器之间的兼容操作。

    <canvas>
    您的浏览器不支持HTML5 Canvas,请升级您的浏览器
    </canvas>

    3.一个简单的Canvas Demo

     

  • 相关阅读:
    第二次作业
    第四次作业
    第三次作业
    第二次作业
    第一次作业
    第四次作业
    第三次作业
    第二次作业
    第一次大学作业
    第四次作业
  • 原文地址:https://www.cnblogs.com/liminjun88/p/3125466.html
Copyright © 2011-2022 走看看