canvas教程

Html5 的canvas使用

字号+ 作者:H5之家 来源:H5之家 2015-11-18 15:20 我要评论( )

本篇文章主要介绍了Html5 的canvas使用,对于HTML教程有兴趣的同学可以参考一下。

         随着安卓的迅猛发展,native app的发展让我们程序员有点蛋疼,随着现在什么微信,淘宝等好像里面的web app的成分也是越来越重,让我们原生app开发者不得不警惕起来,有什么办法呢,还得自己去学咯,个人还是不敢苟同web app将会替代native app,但是html5的功能确实是非常的强大,然后里面的新标签比如Canvase,svg都让我们不得不也联想安卓api里面也是Canvas用的方法差不多,然后5.x后也是推出了svg,看来安卓的native app的开发与html5的距离又拉近了,也不会在为某个动画和贝塞尔曲线搞的蛋疼,那就有必要去学习html5咯。

 学习开发一个新的东西总是苦难的,那么我们就从基础来开始把。

 <Canvas></Canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 。

  还记的javaee的时候也是有document.getElementById()或byName(),同样也是还是支持w3c的规范,还是javaScript和css,所以我们就不应该去畏惧。那么我们就先来看下Canvas的基础吧,其实里面的东西还真不多,也就是画线和画图片,和安卓自定义view里面的onDraw()一样的去写东西就好了。

基础学习:

(1)context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法是 

var context =Canvas.getContext("2d");//var 就是一个弱类型而已,再也没有java里面的什么基本数据类型什么的了

(2) 画的方式

 Canvas元素绘制图像的时候有两种方法,分别是:context.fill()//填充 context.stroke()//绘制边框

   是不是和安卓里面的很像,安卓里面有fill、stroke、fillAndStroke,fill就是内容填充,stroke就是边框

(3) style:在进行图形绘制前,要设置好绘图的样式: context.fillStyle//填充的样式     context.strokeStyle//边框样式

(4)context.lineWidth//图形边框宽度  ,安卓里面呢是strokeWidth,反正都差不多吧

(5)颜色的表示方式:

     直接用颜色名称:"red" "green" "blue"

         十六进制颜色值: "#EEEEFF"

         rgb(1-255,1-255,1-255)

1 2 3 下一页

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

网友点评