• 前言

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

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

  • 创建Canvas

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

类似：<canvas id="canvas" width="800" height="800"/>

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

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

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

if(canvas.getContext)

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

}

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

  • 利用Canvas创建曲线运动

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset=gbf>

 <title>曲线运动</title>

 <script>

 //box

 var box_x=0;

 var box_y=0;

 var box_width=500;

 var box_height=500;

 //ball

 var ball_x=10;

 var ball_y=10;

 var ball_radius=10;

 var ball_vx=10;

 var ball_vy=0;

 //constant

 var g=10;//note

 var rate=0.9;

 //bound

 var bound_left=box_x+ball_radius;

 var bound_right=box_x+box_width-ball_radius;

 var bound_top=box_y+ball_radius;

 var bound_bottom=box_y+box_height-ball_radius;

 //context

 var ctx;

 function init()

 {

 ctx=document.getElementById('canvas').getContext('2d');

 //

 ctx.lineWidth=ball_radius;

 //设置球的颜色

 ctx.fillStyle="rgb(200,0,50)";

 move_ball();

 setInterval(move_ball,100);

 } 

 function move_ball()

 {

 //清除画布上的矩形区域

 ctx.clearRect(box_x,box_y,box_width,box_height);

 move_and_check();

 //开始曲线路径

 ctx.beginPath();

 //绘制圆球

 ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);

 //fillstyle填充

 ctx.fill();

 //绘制指定矩形

 ctx.strokeRect(box_x,box_y,box_width,box_height);

 } 

 function move_and_check()

 {

 var cur_ball_x=ball_x+ball_vx;

 var temp=ball_vy;

 ball_vy=ball_vy+g;

 var cur_ball_y=ball_y+ball_vy+g/2;

 if(cur_ball_x<bound_left)

 {

 cur_ball_x=bound_left;

 ball_vx=-ball_vx*0.9;

 ball_vy=ball_vy*0.9;

 }

 if(cur_ball_x>bound_right)

 {

 cur_ball_x=bound_right;

 ball_vx=-ball_vx*0.9;

 ball_vy=ball_vy*0.9;

 }

 if(cur_ball_y<bound_top)

 {

 cur_ball_y=bound_top;

 ball_vy=-ball_vy*0.9;

 ball_vx=ball_vx*0.9;

 }

 if(cur_ball_y>bound_bottom)

 {

 cur_ball_y=bound_bottom;

 ball_vy=-ball_vy*0.9;

 ball_vx=ball_vx*0.9;

 }

 ball_x=cur_ball_x;

 ball_y=cur_ball_y;

 }

 </script>

 </head>

 <body onLoad="init()">

 <canvas id="canvas" width="800" height="800"/>

 </body>

 </html>

代码中包含了少部分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的一下基本用法。

Canvas实现曲线运动的更多相关文章

  1. html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 基于canvas实现物理运动效果与动画效果(一)

    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...

  3. canvas高级动画示例

    canvas高级动画示例 演示地址 https://qzruncode.github.io/example/index.html <!DOCTYPE html> <html lang ...

  4. 使用JavaScript和Canvas实现下雪动画效果

    该下雪动画效果使用了HTML5中Canvas画布实现,其中涉及了物理学中曲线运动的相关知识与运算. index.html <!DOCTYPE html> <html lang=&qu ...

  5. canvas动画：气泡上升效果

    HTML5中的canvas真是个很强大的东西呢! 这几天突发奇想想做一个气泡上升的动画,经过许久的思考和多次失败,终于做出了如下效果 由于是录制的gif图,看着会有点卡顿,实际演示是很自然的 想要做出 ...

  6. js数学公式-曲线运动

    ---勾股定理 a*a + b*b =c*c ---三角函数 正弦 : sin 余弦 : cos 正切 : tan 余切 : cot 正弦定理 a/sinA = b/sinB =c/sinC = 2r ...

  7. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  8. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  9. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

随机推荐

  1. STL总结之queue, priority_queue, stack

    之所以把这三个容器放在一起,是因为他们都是容器适配器.   STL中queue就是我们常用的FIFO队列,实现是一个容器适配器,这种数据结构在网络中经常使用.   queue的模板声明: templa ...

  2. HDU5673 Robot 默慈金数

    分析: 注:然后学了一发线性筛逆元的姿势 链接:http://blog.miskcoo.com/2014/09/linear-find-all-invert #include<iostream& ...

  3. Upgrading to EF6

    In previous versions of EF the code was split between core libraries (primarily System.Data.Entity.d ...

  4. Linux中的模式转换

    模式转换: 编辑-->输入: i: 在当前光标所在字符的前面,转为输入模式: a: 在当前光标所在字符的后面,转为输入模式: o: 在当前光标所在行的下方,新建一行,并转为输入模式: I:在当前 ...

  5. 【HTML】Beginner6：Link

    1.Link HTML wich basically means a system of linked text     link to another HTML file or any file a ...

  6. 成都Uber优步司机奖励政策（2月6日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. 建立树莓派raspberry交叉编译环境以及编译内核

    最近买了一个树莓派,玩了几天,虽然已经有很多人玩了,现在玩好像有点晚了,但是他确实是个好东西,学好它,对嵌入式的整个开发流程也就会熟悉很多.虽然性能不是很强和现在的BB-BLACK比有点慢了,但是它便 ...

  8. 关于SpingMVC实现文件下载你所不知道的

    http://www.cnblogs.com/yolanda-lee/p/4683422.html 文件的上传下载一般在项目中还是非常实用的,此处专门整理一下文件的下载,至于文件的上传实现将在后续中补 ...

  9. IOS开发之TableView替换默认的checkmark为自定义图像

    直接上代码: On cellForRowAtIndexPath: UIButton*button =[UIButton buttonWithType:UIButtonTypeCustom];CGRec ...

  10. IIS7错误：“Web服务器被配置为不列出此目录的内容”的解决办法

    IIS7错误:“Web服务器被配置为不列出此目录的内容”的解决方法: 在"操作"下,点启用,此按钮将变成禁用,则可消除此错误