Canvas实现曲线运动

• 前言

    Html5添加的最受欢迎的功能就是元素，它负责在页面中设定一个区域，然后在里面可以通过javascript动态地在其内绘制图形。

    主流浏览器，IE9+，手机端都是支持它的。

• 创建Canvas

    要使用Canvas元素就必须先设置其width和height，指定绘图区域的大小

    类似： 

    如果要在这块画布上绘图的话，首先要取得绘图上下文,需调用getContext（）方法

       var canvas=document.getElementById("canvas");

        //判断浏览器是否支持canvas

      if(canvas.getContext)

      {   var draw=canvas.getContext("2d");//这里2d  取得2d上线文对象，还有一个WebGL的3D上下文（还未接触过，不在此陈诉了）

      }

    我们用2d上下文可以绘制简单的2d图形，如矩形，弧线。

• 利用Canvas创建曲线运动

这里有个demo是曲线运动，直接上代码

 1 
 2  
 3  
 4  
 5  
 6  
88  
89  
90  
91  
92 

View Code

代码中包含了少部分2D上下文API。详细API请参考：

http://www.w3school.com.cn/html5/html_5_canvas.asp;

http://blog.teamtreehouse.com/getting-started-with-the-canvas-api

http://javascript.ruanyifeng.com/htmlapi/canvas.html

• 最后

      很多css3不能表现的复杂动画，通过canvas，js来配合解决是极好的，当然这里面还有很多东西，这里小小记录下canvas的一下基本用法。

转载于:https://www.cnblogs.com/zoujking/p/4370328.html