html 5 canvas太陽系モデルを描く練習
10918 ワード
MDN公式サイトでcanvasを勉強して、canvasに対する理解を強化して、学んだ新しい知識を強固にしました.以下に図を置きます.
<html>
<head>
<title>canvastitle>
head>
<body>
<canvas id="mycanvas" width="600" height="600" style="border:1px solid #aaaaaa;" >your brower not support canvas!canvas>
body>
<script type="text/javascript">
draw();
function draw(){
// canvas
var canvas = document.getElementById('mycanvas');
//
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,600,600);// canvas
//
var gradient = ctx.createRadialGradient(300,300,10,300,300,15);//
gradient.addColorStop(0,'#ffff00');//
gradient.addColorStop(1,'rgba(250,250,0,0)');//
ctx.fillStyle = gradient;
ctx.arc(300,300,15,0,2*Math.PI);
ctx.fill();
var a = 0;
var b = 0;
draw_star(ctx,a,b,150,300,300,0.5,'#ad0087')
draw_star(ctx,a,b,150,300,300,0.5,'#ad0087')
draw_star(ctx,a,false,180,300,300,0.2,'#28ff28')
draw_star(ctx,Math.PI/3,false,220,300,300,0.13,'#f9f900')
draw_star(ctx,-Math.PI/3,b,240,300,300,0.063,'#00ff99')
}
var is_up = true;//
/**
* @param ctx ctx
* @param a ， π
* @param b ， π
* @param r ，
* @param sun_x X
* @param sun_y Y
* @param speed
* @param color
*/
function draw_star(ctx,a,b,r,sun_x,sun_y,speed,color){
is_up = a>=Math.PI?false:true;// , 180°
a = a>=Math.PI*2?0:a;// 360°， 360° 0°
if(b!==false){
b>Math.PI*2?b=0:b=b;// 360°， 360° 0°
b+=Math.PI/80*speed;// b ，
}
var x = sun_x-(r*Math.cos(a));// X
var y = Math.sqrt(Math.pow(r,2)-Math.pow((x-sun_x),2))+sun_y;// Y
y = is_up?y:Math.abs(y-(2*sun_y));//
ctx.beginPath();// , ， ，
ctx.fillStyle = "#000";//
ctx.arc(x,y,10,0,2*Math.PI);//
ctx.fill();//
a+=Math.PI/1800*speed;// a ，
y = Math.sqrt(Math.pow(r,2)-Math.pow((x-sun_x),2))+sun_y;// Y
is_up?y=y:y=Math.abs(y-(2*sun_y));//
var gradient_eath = ctx.createRadialGradient(x,y,5,x,y,10);//
gradient_eath.addColorStop(0,color);//
gradient_eath.addColorStop(1,'rgba(0,0,0,0)');//
ctx.beginPath();//
ctx.fillStyle = gradient_eath;//
ctx.arc(x,y,10,0,2*Math.PI);//
ctx.fill();//
b?draw_mouth(ctx,x,y,a,is_up,b,speed):b=b;// b
setTimeout(function(){draw_star(ctx,a,b,r,sun_x,sun_y,speed,color)},0.1);//
}
// 。 ，
function draw_mouth(ctx,x,y,a,is_up,b,speed){
b>Math.PI?is_up = false:is_up=true;
x2 = x-(20*Math.cos(b-(Math.PI/80*speed)));
y2 = Math.sqrt(400-Math.pow((x2-x),2))+y;
is_up?y2=y2:y2=y-Math.abs(y-y2);
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(x2,y2,6,0,2*Math.PI);
ctx.fill();
x1 = x-(20*Math.cos(b));
y1 = Math.sqrt(400-Math.pow((x1-x),2))+y;
is_up?y1=y1:y1=y-Math.abs(y-y1);
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.arc(x1,y1,5,0,Math.PI*2);
ctx.fill();
}
script>
html>