H5基础canvas练习

移动端前端h5开发|前端开发 教程 chm|移动端的前端开发
html 代码片段

<!DOCTYPE html>
<head lang=”en”>
<metacharset=”UTF-8″>
<title>当前流行的前端开发框架:canvas</title>
<metaname=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<style>
*{
margin:0;
padding:0;
}
body{
height:100%
}
#myCanvas{
background:#001022;
}
#myButtons{
bottom:20px;
left:20px;
position:absolute;
}
#myButtonsbutton{
padding:5px;
}
</style>
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
</head>
<body>
<canvasid=”myCanvas” width=”500″ height=”500″></canvas>
<divid=”myButtons”>
<buttonid=”startAnimation”>开始</button>
<buttonid=”stopAnimation”>结束</button>
</div>
<script>
/**
* Created by wangminghui on 16/3/14.
*/
$(document).ready(function(){
varcanvas=$(‘#myCanvas’);
varcontext=canvas.get(0).getContext(‘2d’);
varcanvasWidth=canvas.width();
varcanvasHeight=canvas.height();
$(window).resize(resizeCanvas);
functionresizeCanvas(){
canvas.attr(‘width’,$(window).get(0).innerWidth);
canvas.attr(‘height’,$(window).get(0).innerHeight);
canvasWidth=canvas.width();
canvasHeight=canvas.height();
}
resizeCanvas();
varplayAnimation=true;
varstartButton=$(‘#startAnimation’);
varstopButton=$(‘#stopAnimation’);
startButton.click(function(){
playAnimation=true;
animate();
});
stopButton.click(function(){
playAnimation=false;
});
/*
* 坐标:x,y
* 半径:r,
* 速度:vx,vy
* 加速度:ax,ay
*
* */
varAsteroid=function(x,y,r,mass,vx,vy,ax,ay){
this.x =x;
this.y =y;
this.radius=r;
this.mass=mass;
this.vx=vx;
this.vy=vy;
this.ax=ax;
this.ay=ay;
}
varasteroids= [];
for (vari=0;i<10;i++) {
varx=20+ (Math.random() * (canvasWidth-40));
vary=20+ (Math.random() * (canvasHeight-40));
varrandius=5+Math.random() *10;
varmass=randius/2;
varvx=Math.random() *4-2;
varvy=Math.random() *4-2;
varax=Math.random() *0.2-0.1;
varay=Math.random() *0.2-0.1;
//var ax =0;
//var ay =0;
asteroids.push(newAsteroid(x,y,randius,mass,vx,vy,ax,ay));
}
functionanimate(){
context.clearRect(0,0,canvasWidth,canvasHeight);
context.fillStyle=’rgb(255,255,255)’;
varasteroidsLength=asteroids.length;
for (vari=0;i<asteroidsLength;i++) {
vartmpAsteroid=asteroids[i];
// 速度,改变位置的
tmpAsteroid.x +=tmpAsteroid.vx;
tmpAsteroid.y +=tmpAsteroid.vy;
// 加速度
if (Math.abs(tmpAsteroid.vx) <10) {
tmpAsteroid.vx+=tmpAsteroid.ax;
}
if (Math.abs(tmpAsteroid.vy) <10) {
tmpAsteroid.vy+=tmpAsteroid.ay;
}
// 摩擦力
if (Math.abs(tmpAsteroid.vx) >0.1) {
//tmpAsteroid.vx *= 0.9;
}else{
//tmpAsteroid.vx = 0;
}
if (Math.abs(tmpAsteroid.vy) >0.1) {
//tmpAsteroid.vy *= 0.9;
}else{
//tmpAsteroid.vy = 0;
}
// 判断边界
if (tmpAsteroid.x -tmpAsteroid.radius<0) {
tmpAsteroid.x =tmpAsteroid.radius;
tmpAsteroid.vx*=-1;
tmpAsteroid.ax*=-1;
}elseif (tmpAsteroid.x +tmpAsteroid.radius>canvasWidth) {
tmpAsteroid.x =canvasWidth-tmpAsteroid.radius;
tmpAsteroid.vx*=-1;
tmpAsteroid.ax*=-1;
}
if (tmpAsteroid.y -tmpAsteroid.radius<0) {
tmpAsteroid.y =tmpAsteroid.radius;
tmpAsteroid.vy*=-1;
tmpAsteroid.ay*=-1;
}elseif (tmpAsteroid.y +tmpAsteroid.radius>canvasHeight) {
tmpAsteroid.y =canvasHeight-tmpAsteroid.radius;
tmpAsteroid.vy*=-1;
tmpAsteroid.ay*=-1;
}
// 判断碰撞
for (varj=i+1;j<asteroidsLength;j++) {
vartmpAsteroidB=asteroids[j];
vardx=tmpAsteroidB.x -tmpAsteroid.x;
vardy=tmpAsteroidB.y -tmpAsteroid.y;
vardis=Math.sqrt((dx*dx) + (dy*dy));
if (dis<tmpAsteroid.radius+tmpAsteroidB.radius) {
// 弹开物体
varangle=Math.atan2(dy,dx);
varsine=Math.sin(angle);
varcosine=Math.cos(angle);
varx=0;
vary=0;
varxb=dx*cosine+dy*sine;
varyb=dy*cosine-dx*sine;
varvx=tmpAsteroid.vx*cosine+tmpAsteroid.vy*sine;
varvy=tmpAsteroid.vy*cosine+tmpAsteroid.vx*sine;
varvxb=tmpAsteroidB.vx*cosine+tmpAsteroidB.vy*sine;
varvyb=tmpAsteroidB.vy*cosine-tmpAsteroidB.vx*sine;
vx*=-1;
vxb*=-1;
xb=x+ (tmpAsteroid.radius+tmpAsteroidB.radius);
tmpAsteroid.x =tmpAsteroid.x + (x*cosine-y*sine);
tmpAsteroid.y =tmpAsteroid.y + (y*cosine+x*sine);
tmpAsteroidB.x =tmpAsteroid.x + (xb*cosine-yb*sine);
tmpAsteroidB.y =tmpAsteroid.y + (yb*cosine+xb*sine);
tmpAsteroid.vx=vx*cosine-vy*sine;
tmpAsteroid.vy=vy*cosine+vx*sine;
tmpAsteroidB.vx=vxb*cosine-vyb*sine;
tmpAsteroidB.vy=vyb*cosine+vyb*sine;
/*var vTotal= vx-vxb;
vx = ((tmpAsteroid.mass-tmpAsteroidB.mass)*vx+2*tmpAsteroidB.mass*vxb)/(tmpAsteroid.mass+tmpAsteroidB.mass);
vxb = vTotal+vx;*/
}
}
context.beginPath();
context.arc(tmpAsteroid.x,tmpAsteroid.y,tmpAsteroid.radius,0,Math.PI*2,false);
context.closePath();
context.fill();
}
if (playAnimation) {
setTimeout(animate,33);
}
}
});
</script>
</body>
</html>

app web前端开发框架有哪些|mac 前端开发工具|h5开发和前端开发工具

» 本文来自:前端开发者 » 《H5基础canvas练习》
» 本文链接地址:https://www.rokub.com/3774.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!