0
修正お願いします
学生で教科書巻末のソースコードをそのまま
うちこんだつもりなのですがうまく起動しません
内容は「実行する度に異なる線画が描かれていく」という
ものです
自分の打ち込んだものです↓修正お願いします
<html>
<head>
<title>Rotation Sample</title>
<!--[if IE]><script
type="text/javascript"src="excanvas.js"></script><!
[endif]-->
var OBJECT_NUM =3;
var start =1;
var scale =1.0;
var canvas,ctx;
var objects=[];
function Object(){
this.x
=0;//canvas.width / 2;
this.y
=canvas.height / 2;
this.r1 =
(Math.random()*100+10)*scale;
this.r2 =
(Math.random()*100+10)*scale;
this.theta1 =0.0;
this.theta2 =0.0;
this.theta1add=Math.random()/100;
this.theta2add=Math.random()/10;
this.r1add =
(Math.random()/25)*scale;
this.r2add =
(Math.random()/25)*scale;
if(Math.random()
<0.5){
this.r1add*=-1;
}
if(Math.random()
<0.5){
this.r2add*=-1;
}
colorR=Math.floor(Math.random()*0xFF).toString(10);
colorG=Math.floor(Math.random()*0xFF).toString(10);
colorB=Math.floor(Math.random()*0xFF).toString(10);
this.color1="rgb("+colorR+","+colorG+","+colorB+")";
colorR=Math.floor(Math.random()*0xFF).toString(10);
colorG=Math.floor(Math.random()*0xFF).toString(10);
colorB=Math.floor(Math.random()*0xFF).toString(10);
this.color2="rgb("+colorR+","+colorG+","+colorB+")";
}
Object.prototype.update=function(){
this.theta1+=this.theta1add;
this.theta2+=this.theta2add;
this.r1
+=this.r1add;
this.r2
+=this.r2add;
}
Object.prototype.draw=function(num){
var
area=canvas.width/OBJECT_NUM;
var
ox=this.x+(num*area)+area/2;
var
oy=this.y;
var mx;
var my;
mx=ox+this.r1*Math.sin(this.theta1);
my=oy+this.r1*Math.cos(this.theta1);
ctx.beginPath();
ctx.strokeStyle=this.color1;
ctx.moveTo(mx,my);
ctx.lineTo(mx+1,my+1);
ctx.stroke();
ctx.closePath();
var ox2=mx;
var oy2=my;
var mx2;
var my2;
mx2=ox2+this.r2*Math.sin(this.theta2);
my2=oy2+this.r2*Math.cos(this.theta2);
ctx.beginPath();
ctx.strokeStyle=this.color2;
ctx.moveTo(mx2,my2);
ctx.lineTo(mx2+1,my2+1);
ctx.stroke();
ctx.closePath();
}
function init(){
document.onkeypress=keyEvent;
canvas=document.getElementByld("cv");
ctx=canvas.getContext("2d")
ctx.lineWidth="2";
ctx.strokeStyle="rgb(255,255,255)";
for(var
i=0;i<OBJECT_NUM;i++){
objects[i]=newObject();
}
exec();
}
functionkeyEvent()
{
if(start)
start=0;
else
start=1;
}
function exec(){
if(start==1){
for(var
i=0;i<OBJECT_NUM;i++){
ctx.save();
objects[i].update();
objects[i].draw(i);
ctx.restore();
}
}
setTimeout(exec,1);
}
</script>
<style>
body{
background-color:black;
margin:20px;
text-align:center;
}
canvas{
border:1pxsolid#FFFFFF;
}
</style>
</head>
<bodyonload="init();">
<canvasid="cv"width="800"height="600"></canvas>
</body>
</html>
終了です