html5 canvas兑现旋转的心
日期：2014-05-17 浏览次数：20762 次
html5 canvas实现旋转的心
<!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>
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
