Html5系列(二十三) canvas高级贝塞尔曲线运动动画
来源:互联网 发布:大数据就业培训 编辑:程序博客网 时间:2024/06/02 23:28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>canvas高级贝塞尔曲线运动动画</title><script src="js/modernizr.js "></script></head><body><script type="text/javascript ">window.addEventListener('load',eventWindowLoaded,false);function eventWindowLoaded(){ canvasApp();}function canvasSupport(){ return Modernizr.canvas;}function canvasApp(){ if(!canvasSupport()){ return; } var pointImage = new Image(); pointImage.src="point.png "; function drawScreen(){
//首先填充canvas的背景 context.fillStyle = '#eee' context.fillRect(0,0,theCanvas.width,theCanvas.height); //边框 context.strokeStyle = '#eee' context.strokeRect(1,1,theCanvas.width,theCanvas.height);
//在这里解释下贝塞尔曲线,看网页底部的那个点击成Canvas三次贝塞尔曲线操作实例!你就会发现一个曲线是由4个点组成的,在下面有注释
var t = ball.t; var cx = 3*(p1.x-p0.x); var bx = 3*(p2.x-p1.x)-cx; var ax = p3.x-p0.x-cx-bx; var cy = 3*(p1.y-p0.y); var by = 3*(p2.y-p1.y)-cy; var ay = p3.y-p0.y-cy-by; var xt = ax*(t*t*t)+bx*(t*t)+cx*t+p0.x; var yt = ay*(t*t*t)+by*(t*t)+cy*t+p0.y; //这里的xt和yt贝塞尔曲线的公式,这里涉及到一门叫做计算机图形学的学科(大学里面有上,我也最近一直在上)
// 0 <= t <= 1这是一个T....学过图形学的应该知道比如一根直线他的起始坐标轴的位置(0,0)然后有DDA算法计算斜率,他也是一样,具体的公式网上还是都有的,我的语言组织也不是很好-_-//
ball.t +=ball.speed; if(ball.t>1){ ball.t=1; } //绘制点 context.font = "10px sans "; context.fillStyle = "#ff0000 "; context.beginPath(); context.arc(p0.x,p0.y,8,0,Math.PI*2,true); context.closePath(); context.fill(); context.fillStyle = "#fff"; context.fillText("0",p0.x-2,p0.y+2); // points.push({x:xt,y:yt}); for(var i =0;i<points.length;i++){ context.drawImage(pointImage,points[i].x,points[i].y,1,1);
} //绘制图片重点!!!!图片,定位context.drawImage(img,x,y,width,height);也就是绘制那个点后的小点的轨迹
context.closePath(); context.fillStyle="#000000 "; context.beginPath(); context.arc(xt,yt,5,0,Math.PI*2,true); context.closePath(); context.fill(); } var p0={x:60,y:10};//起始点 var p1={x:70,y:200};//1号点 var p2={x:125,y:295};//2号点 var p3={x:350,y:350};//3号点 var ball={x:0,y:0,speed:.01,t:0}; var points=new Array(); //这里的起始点和3号点,我取得的名字比较通俗一下,实际上应该称为端点。因为必须要经过的
//1号点和2号点虽然可以删除但是他控制着弧线的路径,我们就叫他控制点 theCanvas = document.getElementById('canvas') context = theCanvas.getContext("2d") setInterval(drawScreen,33); }</script><canvas id="canvas" width="800 " height="800 ">你的浏览器无法使用canvas小白童鞋;你的支持是我最大的快乐!!</canvas></body></html>"
http://files.cnblogs.com/files/LoveOrHate/canvas13.rar
好了大致也标注了一下重点之类的
有关贝塞尔的算法,我表示,我也是喜欢套公式的,让我自己研究公式你还是杀了我吧
刚刚有人问canvas是否能完成这样的效果,然后我就大致写了个大概!这个跨度跳的比较大的
实际上写博客只是为了让自己回顾下知识,毕竟当年刚开始学的时候有的地方也不是很理解!最后变成了瓶颈,困扰,所以重新回顾下的!这一篇写完,我又要继续枯燥的写基础了
因为我也没钱买空间放demo
所以大家把代码跑一下就行了-_-//
如果问我的工资都去哪里的话,我表示http://www.vogue.com.cn/ 上面的东西很贵的!偶要把钱存起来,以后交女朋友很贵的T_T
0 0
- Html5系列(二十三) canvas高级贝塞尔曲线运动动画
- HTML5 Canvas实践(二)Canvas 高级功能
- 7.HTML5 高级Canvas技术-基本动画
- HTML5开发 页游/手游动画及游戏系列教程(Game Tutorial):(二)基本动画(canvas先生很忙)
- Android开发 之 曲线运动动画(贝塞尔曲线)
- Html5 Canvas 系列_绘图二
- HTML5(二) canvas基础
- HTML5 canvas画布(二)
- HTML5 之 Canvas (二)
- 浅谈HTML5 canvas(二)
- html5 canvas浅介(二)
- html5高级程序设计(canvas笔记)
- html5动画基础(canvas,闹钟)
- html5动画基础(canvas,太阳)
- html5动画基础(canvas,太阳系)
- (19)HTML5-Canvas动画应用
- html5之canvas动画
- html5 canvas气泡动画
- 成都崇州首例销售地下网络私彩嫌疑人被批捕
- python2.7-64安装mysql驱动
- mysql group by
- OSPF Area & LSA详解
- poj 1789 Truck History (克鲁斯卡尔)
- Html5系列(二十三) canvas高级贝塞尔曲线运动动画
- 排序
- javascript的原型和构造函数
- Html5系列(二十) 学习之 Html5功能判断插件 Modernizr
- MFC读写文件CStdioFile(除此之外还有CFile,CArchive,CMemFile等等)
- codeforces535B:Tavas and SaDDas
- MapReduce实现自定义二次排序
- Html5系列(二十二)画布(阴影)
- HTML5系列(二十一)画布(变形)