html5 canvas实现旋转的心

wjlgryx

浏览: 306876 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html5 文章

HTML5 HTML

<!DOCTYPE html>

<html>

<head>

<meta charset='UTF-8' />

<title>3D LOVE in canvas</title>

</head>

<body>

<canvas id="pad" width="800" height="800" ><a href='http://www.cssass.com'>cssass.com</a>HTML5 canva</canvas>

</body>

<script type="text/javascript" >

function g(e){

return document.getElementById(e);

}

var theta = -0.4;

var eleva = -0.1;

var pad = g('pad');

var ctx = pad.getContext('2d');

ctx.translate(200,200);

ctx.scale(82,82);

function iso(x,y,z){

var dist = Math.sqrt(x*x+y*y);

var angle = (x==0 && y==0) ? 0 : Math.atan(y/x) + theta + ((x<0)? Math.PI : 0);

x=Math.cos(angle)*dist;

y=-Math.sin(angle)*dist;

var fact = (y*Math.cos(eleva) + z*Math.sin(eleva)+8)/8;

y=y*Math.sin(eleva) - z*Math.cos(eleva);

x*=fact;

y*=fact;

return {

x: x,

y: y

};

}

function love(){

var x,y,z,m,t=3;

for(z=-3;z<=3;){

for(y=-3;y<=3;){

for(x=-3;x<=3;){

m=(x*x + (9/4)*y*y + z*z - 1)*(x*x + (9/4)*y*y + z*z - 1)*(x*x + (9/4)*y*y + z*z - 1) - x*x*z*z*z - (9/80)*y*y*z*z*z;

if(m<0){

co = iso(x,y,z);

ctx.strokeRect(co.x, co.y,0.02,0.02);

ctx.closePath();

}

x+=0.11;

}

y+=0.11;

}

z+=0.11;

}

}

function preview(){

ctx.clearRect(-10,-10,20,20);

ctx.lineWidth=0.008;

ctx.lineJoin = "round";

ctx.strokeStyle = 'rgba(150,0,100,0.3)';

var co;

ctx.beginPath();

love();

ctx.stroke();

};

preview();

/* ��϶�� */

pad.onmousedown=function(e){

var x0 = e.clientX, y0 = e.clientY;

document.onmousemove=function(e){

theta -= (x0 - (x0=e.clientX))/100;

eleva -= (y0 - (y0=e.clientY))/100;

theta%=Math.PI*2; if (theta<0) theta+=Math.PI*2;

eleva%=Math.PI*2; if (eleva<0) eleva+=Math.PI*2;

preview();

}

document.onmouseup=function(e){

document.onmousemove=null;

}

}

</script>

</html>

xin.rar (958 Bytes)
下载次数: 27

分享到：

html5 实现动画（一） | 创建一个HTML5的3D引擎

2011-03-23 11:57
浏览 1871
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论