canvasとActionScript(以下AS)のテキストスタイル、図形描写の設定比較

canvasとActionScriptはJavaScriptに似たコードだから比較的に似てるけど覚書のため。

テキスト文章

AS

//テキストフィールド作成
var a_text:TextField = new TextField();
//テキストフィールドをステージに出力
this.addChild(a_text);
//テキスト入力
a_text.text = "ABC";

canvas

//htmlコード上のcanvasタグのIDを呼び出して描写できるよう宣言する。
var canvas = $("#myCanvas");
var ctx = canvas.get(0).getContext("2d");
//出力するテキスト文と、座標を入力
ctx.fillText("テキスト",X座標,Y座標)

テキストフォーマット(フォント、サイズ、カラーなど)

AS

//新規テキストフォーマットを宣言
var t_format:TextFormat = new TextFormat();
//フォント
t_format.font = "Bell MT";
//サイズ
t_format.size = 24;
//カラー
t_format.color = 0x00cc33;
  .
  .
  .

//適用させたいテキストフィールドにフォーマットさせる
a_text.setTextFormat(t_format);

canvas

//サイズ、フォントを指定
ctx.font = "14px ヒラギノ明朝 Pro W3";
//塗りつぶしの色を指定
ctx.fillStyle = 'rgba(128, 100, 162, 0.7)';

線

AS

//●線のスタイル
//オブジェクト.graphics.lineStyle(線幅、色、透明度);
a_sp.graphics.lineStyle(8,0x000FF,0.7);

//●線の開始位置
//オブジェクト.graphics.moveTo(x座標,y座標);
a_sp.graphics.moveTo(0,0);

//●指定の座標(中継点)まで線を引く
//オブジェクト.graphics.lineTo(x座標,y座標);
//第2中継点
a_sp.graphics.lineTo(100,100);
//第3中継点
a_sp.graphics.lineTo(200,0);
//第4中継点
a_sp.graphics.lineTo(300,100);

canvas

	//★線
	ctx.beginPath();//パス操作開始の宣言
	ctx.moveTo(125,125);//パスの起点
	ctx.lineTo(250,125);//パスの終点
	ctx.lineWidth = 5;//線幅
	ctx.strokeStyle = "rgb(255,0,0)";
	ctx.stroke();//パスの輪郭線を書く

四角形

AS

var d_sp:Sprite = new Sprite();
addChild(d_sp);
//塗りつぶしの色
d_sp.graphics.beginFill(0xff0000);
//drawRect(x, y, width, height)
d_sp.graphics.drawRect(100,100,100,100);
d_sp.graphics.endFill();

canvas

//塗りつぶしあり：fillRect(x, y, width, height)
ctx.fillRect(50, 50, 150, 50);
//塗りつぶし無し：fillRect(x, y, width, height)
ctx.strokeRect(350,200,50,50);