SQLの窓

2014年09月27日


Firefox、IE11 の canvas で動作する楕円( ellipse )関数

ellipse 関数は、Google Chrome で動作しますが、現時点で Firefox と IE11 で動作してなかったので、計算で Google Chrome の ellipse をエミュレートしました。
<style type="text/css">
#circle {
	border: solid 1px #000000;
}
</style>

<canvas id="circle"></canvas>

<script type="text/javascript">
	var canvas = document.getElementById("circle");
	canvas.width = 300;
	canvas.height = 300;
	var draw = canvas.getContext("2d");

	draw.beginPath();
	draw.fillStyle = "#c0c0c0";

	ellipse( draw, 80, 50, 100, 85, 0, Math.PI*2, false);
	draw.fill();
	draw.lineWidth = 3;
	draw.stroke();

// *********************************
// 楕円関数
// *********************************
function ellipse( obj, x, y, a, b, o1, o2, o3 ) {
	draw.save();
	draw.scale( 1, b / a );
	draw.arc(x, y+((a-b)+((y-a)-(y-a)*(b/a)))*(a/b), a, o1, o2, o3);
	draw.restore();

}
</script>
save と restore は、伸縮する楕円の枠線の太さが変わらないようにする処理です。計算は、scale による伸縮による座標の移動を逆計算したものです。


【JavaScriptの最新記事】
posted by lightbox at 2014-09-27 00:33 | JavaScript | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり