• 前言

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. njust oj triple 莫比乌斯反演

    分析:令f(x)为1到n的gcd(i,j)==x的个数 F(x)为1到n的x|gcd(i,j)的对数 显然F(n)=∑n|df(d) 然后由莫比乌斯反演可得f(n)=∑n|d μ(d/n)*F(d) ...

  2. Entity Framework 杂碎

    其实看图很简单,database first和model first都是通过 data model创建的edmx文件,只不过model first模块可以自己根据需要创建和修改实体,显得更加灵活. c ...

  3. ThinkPadTablet如何恢复出厂状态

    ThinkPad Tablet恢复出厂操作教程: 第一步:开机看到“LENOVO”图标后不停按机器侧面音量增大键,直到出现“Booting recovery kernel image”字样. 第二步: ...

  4. codeforce 621B Wet Shark and Bishops

    对角线 x1+y1=x2+y2 或者x1-y1=x2-y2 #include<iostream> #include<string> #include<algorithm& ...

  5. 搭建Windows Azure开发环境-环境搭建

    虚拟机中运行 练习1:使用远程桌面连接到虚拟机 在本节中,你会登录到Windows Azure的门户网站,并使用Windows Azure库创建的Azure虚拟机. 任务1 -配置的Visual St ...

  6. HDU 3392 Pie(DP)

    题意:有一些男生女生,男生女生数量差不超过100 ,男生女生两两配对.要求求出一种配对方法,使每一对的高度差的和最小. 思路:(我是真的笨笨笨!!)设人少的一组人数为n,b[],人多的一组人数为m,g ...

  7. MongoDB 入门之查询（find）

    MongoDB 入门之查询(find) 1. find 简介 (1)find的第一个参数决定了要返回哪些文档. 空的查询文档会匹配集合的全部内容.默认就是{}.结果将批量返回集合c中的所有文档. db ...

  8. 问题-[ACCESS2007]怎么显示MsysObjects

    office 2007设置:单击左上角图标 -> Access选项 -> 当前数据库 -> 导航 -> 导航选项 -> 勾选显示隐藏对象,显示系统对象.数据库工具选项卡 ...

  9. ehcharts中国地图四级级下钻

    echarts 官网关于中国地图,只有全国-省:省-市,没有中国-省-市-县四级下钻相关文献,echarts地图最重要一点是模块化相对于其他各个图形,一下为三级下钻部分代码包括各级别交互,望指点: 中 ...

  10. Cocos2d-x滚动列表具体解释(CCScrollView的使用)

    今天要写一个滚动列表功能,类似以下这样.(图片资源都是自己从天天酷跑里面抠的,仅用于学习方便) 首先,这样一个列表就和iOS里面的UITableView没什么两样,当然,Android中肯定也存在类似 ...