liguofeng29’s blog

個人勉強用ブログだっす。

2016-01-23から1日間の記事一覧

HTML5のcanvas要素 - イメージを描く

イメージ描くをメソッド void drawImage(Image image, float x, float y) : x,y位置にそのまま表示する void drawImage(Image image, float x, float y, float width, float height) : x,y位置に伸縮して表示する void drawImage(Image image, integer sx, i…

HTML5のcanvas要素 - 複雑な図形を描く (円、角丸四角、N角星、N葉っぱ花など)

複雑な図形を描く際には経路を使う。 使用流れ canvasRenderingContext2DのbeginPaht()で開始する canvasRenderingContext2Dのメソッドで経路を追加する arc arcTo bezierCurveTo lineTo moveTo quadraticCurveTo rect canvasRenderingContext2DのclosePaht(…

HTML5のcanvas要素 - 影を設定する

影を設定する属性 shadowBlur shadowColor shadowOffsetX shadowOffsetY <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 影を設定する</title> </head> <body> <h2> 影を設定するサンプル </h2> <canvas id="canvas" width="500" height="280" style="border:1px solid black"></canvas></body></html>

HTML5のcanvas要素 - テキストを描く

テキストを描く二つのメソッド fillText(String text, float x, float y, [float maxWidth]) strokeText(String text, float x, float y, [float maxWidth]) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> テキストを描く </title> </head> <body> <h2> テキストを描くサンプル </h2> </body></html>

HTML5のcanvas要素 - 四角を描く

四角を描く二つのメソッド fillRect(float x, float y, float width, float height) strokeRect(float x, float y, float width, float height) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 図形を描く </title> </head> <body> <h2> 図形を描くサンプル </h2> </body></html>

HTML5のcanvas要素 - canvasのサンプル一覧

・ 四角を描く ・ テキストを描く ・ 影を描く ・ 円を描く ・ 角丸四角を描く ・ 多角星を描く ・ N葉っぱ花を描く ・ イメージを描く ・ 座標システム変更 ・ 雪落下 ・ 矩形陣変換 ・ 合成制御 ・ グラデーション ・ 出力