|
html5のcanvas要素で楕円を描くオブジェクトを作ってみました。
canvas要素で楕円を描きたくてうずうずしている人に朗報。
canvas要素で楕円を描くオブジェクトを作ってみました。
とりあえず、わからなければコピペすべしっ。
そして、下の書き方例にそってコーディングすべしっ。
もしバグがあったら教えてください。
Ellipse= {
"init" : function(ctx, centerX,centerY, xSize, ySize){
var elps = this.ellipse;
elps.value = -360;
elps.ctx = ctx;
elps.cx = centerX;
elps.cy = centerY;
elps.x = xSize;
elps.y = ySize;
elps.drawn = false;
return elps;
},
"ellipse" : {
"value" : 360,
"x" : 0,
"y" : 0,
"cx" : 0,
"cy" : 0,
"ctx" : null,
"drawn" : false,
"isWidthLarge" :function(){return ((this.x > this.y) ? true : false);},
"baseRadius" : function(){
if(this.isWidthLarge()){
return this.y;
}else{
return this.x;
}
},
"moveRadius" : function(){
if(this.isWidthLarge()){
return (this.x - this.y) * (this.x +this.y);
}else{
return (this.y - this.x) * (this.y +this.x);
}
},
"moveNext" : function(){
this.value += 1;
return this.value < 360;
},
"getPosRadian" : function(){
return (this.value * Math.PI) / 360;
},
"getPosRadius" : function(){
returnMath.sqrt(Math.pow(this.baseRadius(), 2) + this.moveRadius() *Math.pow(this.movePosRadian(), 2));
},
"getPosX" : function(){
return this.x *Math.cos(this.getPosRadian());
},
"getPosPhy" : function(){
if(this.value >= 0){
return Math.acos(this.getPosX() /this.getPosRadius());
}else{
return - Math.acos(this.getPosX() /this.getPosRadius());
}
},
"movePosRadian" : function(){
var rtn;
if(this.isWidthLarge()){
if(Math.cos(this.getPosRadian()) <0){
rtn = -Math.cos(this.getPosRadian());
}else{
rtn = Math.cos(this.getPosRadian());
}
}else{
if(Math.sin(this.getPosRadian()) <0){
rtn = -Math.sin(this.getPosRadian());
}else{
rtn = Math.sin(this.getPosRadian());
}
}
return rtn;
},
"getNextRadian" : function(){
return ((this.value + 1) * Math.PI) /360;
},
"getNextRadius" : function(){
returnMath.sqrt(Math.pow(this.baseRadius(), 2) + this.moveRadius() *Math.pow(this.moveNextRadian(), 2));
},
"getNextX" : function(){
return this.x *Math.cos(this.getNextRadian());
},
"getNextPhy" : function(){
if(this.value >= 0){
return Math.acos(this.getNextX() /this.getNextRadius());
}else{
return - Math.acos(this.getNextX() /this.getNextRadius());
}
},
"moveNextRadian" : function(){
var rtn;
if(this.isWidthLarge()){
if(Math.cos(this.getNextRadian()) <0){
rtn = -Math.cos(this.getNextRadian());
}else{
rtn = Math.cos(this.getNextRadian());
}
}else{
if(Math.sin(this.getNextRadian()) <0){
rtn = -Math.sin(this.getNextRadian());
}else{
rtn = Math.sin(this.getNextRadian());
}
}
return rtn;
},
"draw" : function(){
this.ctx.beginPath();
while(this.moveNext())
this.drawArc();
this.drawn = true;
},
"drawArc" : function(ctx, ox, oy,r, from, to){
var start = - this.getPosPhy();
var end = - this.getNextPhy();
if(this.ctx){
this.ctx.arc(this.cx, this.cy,this.getPosRadius(), start, end, true);
return true;
}else{
return false;
}
},
"fill" : function(style){
if(this.drawn){
this.ctx.fillStyle = style;
this.ctx.fill();
return true;
}else{
return false;
}
},
"stroke" : function(style){
if(this.drwan){
this.ctx.strokeStyle = style;
this.ctx.stroke();
return true;
}else{
return false;
}
}
}
}
長いっ！
その分、使い方は簡単にしております。
そうでなければ、労は報われない…
【使い方-例】
Idにcanvasという値を設定したcanvas要素を準備しておく。
Canvas要素のwidth属性とheight属性にはそれぞれ、300を指定しておく。
行1と行2はcanvas要素を2Dグラフィックスとして描くための設定。
行3は今回作成したオブジェクトの初期化処理。引数は以下の通り。
行4は楕円を描く処理。引数なし。
行5は円を塗りつぶす処理。
引数は色を表す文字列(例：”#ff9900”とか、”red”など)。
行6は円のボーダーラインを引く処理。
引数は色を表す文字列。
ちなみにこの処理の実行結果は次の通りです。
|
||||||||||||||||||||||||
- >
- コンピュータとインターネット
- >
- コンピュータ
- >
- ソフトウェア
コメント（0）
