html5绘制运动的图形,html5 canvas高级贝塞尔曲线运动动画

最新推荐文章于 2021-06-28 00:55:48 发布

廖宝华

最新推荐文章于 2021-06-28 00:55:48 发布

阅读量436

点赞数

文章标签： html5绘制运动的图形

本文介绍了如何在canvas上利用贝塞尔曲线创建动态动画，包括贝塞尔曲线的基本概念、关键点计算和屏幕绘制过程。通过实例展示了如何通过JavaScript控制球体沿曲线运动，并使用Modernizr检测canvas支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas高级贝塞尔曲线运动动画

window.addEventListener('load',eventWindowLoaded,false);functioneventWindowLoaded(){

canvasApp();

}functioncanvasSupport(){returnModernizr.canvas;

}functioncanvasApp(){if(!canvasSupport()){return;

}varpointImage= newImage();

pointImage.src="point.png";functiondrawScreen(){ //首先填充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个点组成的，在下面有注释vart=ball.t;varcx= 3*(p1.x-p0.x);varbx= 3*(p2.x-p1.x)-cx;varax=p3.x-p0.x-cx-bx;varcy= 3*(p1.y-p0.y);varby= 3*(p2.y-p1.y)-cy;varay=p3.y-p0.y-cy-by;varxt=ax*(t*t*t)+bx*(t*t)+cx*t+p0.x;varyt=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(vari=0;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();

}varp0={x:60,y:10};//起始点varp1={x:70,y:200};//1号点varp2={x:125,y:295};//2号点varp3={x:350,y:350};//3号点varball={x:0,y:0,speed:.01,t:0};varpoints=newArray();

//这里的起始点和3号点，我取得的名字比较通俗一下，实际上应该称为端点。因为必须要经过的 //1号点和2号点虽然可以删除但是他控制着弧线的路径，我们就叫他控制点

theCanvas=document.getElementById('canvas')

context=theCanvas.getContext("2d")

setInterval(drawScreen,33);

}

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！