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の最新記事】
- Replit : js-web-speech
- JavaScript の論理和(||) による『無かった場合の値の代入』/ expr1 || expr2 は expr1 を false と見ることができる場合は expr2 を返します
- Seesaa の記事に下の『最新の同カテゴリのリスト』のリンクの最後に付く ?seesaa_related=category を削除する方法
- JavaScript : ブラウザ判定( IE11 対応 ) / edge を追加
- JavaScript : 入力文字列を 変数用16進数表現 に変換する
- JavaScript : 入力文字列を htmlentity に変換する
- HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる
- HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述( この手のコントロールはとてもデリケートです。いろいろなパターン検証が必要です )
- テーブルのセルをクリックして背景色を rgb(0,0,0) から #000000 の変換で、eval を使う事の考察
- JavaScript & VBScript : ブラウザから Windows の OS のバージョンを判定
- 文字列を UTF-8(２バイト以上) で表現した時の 16進数表現の文字列を取得する
- ブログで jQuery を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする
- JavaScript による２会話アプリケーションのコントロール(2)
- JavaScript による２会話アプリケーションのコントロール(1)
- JavaScript : Global な undefined 変数に絡むいろいろ
- 簡易縦書き変換
- ブラウザの WebGL チェック : jQuery 名前空間へ変数($.is_webgl)追加
- JSONP の原理と、簡単な利用方法の実際のコード( 実装は jQuery が良いですが、Access-Control-Allow-Origin: * のほうが楽だし読込み先を制限できます )
- document.createElement("a") で新しいウインドウ(タブ)を開く
- JavaScript と VBScript のカラーコード(#RRGGBB)の文字列と数値間の相互変換
