canvasのお勉強

canvasのお勉強 2010/6/25

jsdo.it」を見てると、「canvas、今年はやらんといかんばい!」という気持ちが強くなってきました。
そんなわけでまずは楽するための方法を探ることにしました。

コードヒントとか出ると楽だよねと思ったらあった。
canvasのコードヒントをDreamweaverで出るようにしてみた。 – 秋葉秀樹 個人ブログ

けど、重複してる部分があったり、FlashDevelopみたいに引数にxやらyやらうんにゃら出たらいいなぁと思ったので勝手に修正版。間違ってる部分あったらすいません。

  <!-- Javascript Canvas Class -->
  <menu classpattern="getContext" displayrestriction="JavaScript" casesensitive="true" additionaldismisschars=".;">
	<property label="fillStyle"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="font"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="globalAlpha"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="globalCompositeOperation"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="lineCap"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="lineJoin"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="lineWidth"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="miterLimit"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="shadowBlur"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="shadowColor"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="shadowOffsetX"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="shadowOffsetY"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="strokeStyle"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="textAlign"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<property label="textBaseline"	source="JavaScript"	icon="shared/mm/images/hintProperty.gif"/>
	<method pattern="toDataURL()"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="getContext(contextId)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="addColorStop(offset,color)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="arc(x,y,radius,startAngle,endAngle,anticlockwise)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="arcTo(x1,y1,x2,y2,radius)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="beginPath()"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="clearRect(x,y,w,h)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="clip()"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="closePath()"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="createImageData(sw,sh)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="getImageData(sx,sy,sw,sh)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="putImageData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="createLinearGradient(x0,y0,x1,y1)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="createPattern(image,repetition)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="createRadialGradient(x0,y0,r0,x1,y1,r1)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="drawImage(image,dx,dy)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="fill()"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="fillText(text,x,y[,maxWidth ])"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="fillRect(x,y,width,height)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="isPointInPath(x,y)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="lineTo(x,y)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="measureText(text)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="moveTo(x,y)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="quadraticCurveTo(cpx,cpy,x,y)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="rect(x,y,w,h)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="restore()"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="rotate(angle)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="save()"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="scale(x,y)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="setTransform(m11,m12,m21,m22,dx,dy)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="stroke()"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="strokeRect(x,y,w,h)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="strokeText(text,x,y[,maxWidth])"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="translate(x,y)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
	<method pattern="transform(m11,m12,m21,m22,dx,dy)"	source="JavaScript"	icon="shared/mm/images/hintFunction.gif" />
  </menu>

編集するファイルは、
・Macなら
/Applications/Adobe Dreamweaver CS4/configuration/CodeHints/CodeHints.xml

・Windowsなら
/Program Files/Adobe/Adobe Dreamweaver CS4/configuration/CodeHints/CodeHints.xml

というファイルを編集します。(※ファイルの編集は自己責任でお願いします)

チートシート。プロパティにはヒントが出ないのでこれで補間していただけたら。
HTML5 Canvas Cheat Sheet

あとは勉強あるのみ。
まずは基本から・HTML5のCanvasについて参考になったサイトまとめ – かちびと.net

生きたサンプル
jsdo.it

頑張りましょう!

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ