CANVASでお絵描きpart7 お絵描きツール

今日、会社の給湯室でほかほかのご飯が炊かれてました。
米炊く会社があるってことを初めて知った11月の昼。

基本的な描画は掴めてきたので、canvasを使ってお絵描きツールを作ってみました。

サンプル

こちらを参考にしています。

CANVASでお絵描きpart6 画像変換

今日は国旗シリーズはお休みして、canvasで描いた画像をpng・jpgへ変換する方法を。

toDataURL()メソッドを使って画像変換します。

デモページ

こちらのページを参考にしました。

http://www.html5.jp/canvas/ref/HTMLCanvasElement/toDataURL.html

ソース

CANVASでお絵描き part5

今日はジャマイカ！
いか邪魔じゃまいか！なんつて。

以下ソース。

<canvas id="jamaica" width="300" height="200" style="border: solid 1px #000; background-color: #000000;"></canvas>

国旗シリーズ飽きるまで続けます。

CANVASでお絵描き part4

今回はノルウェーです。北欧諸国で攻めていこうかと。

以下ソースコード

<canvas id="norway" width="300" height="218" style="border: solid 1px #000; background-color: #ef2b2d;"></canvas>

CANVASでお絵描き part3

こんばんわ。

今日は体調不良のため会社早退しました。

風邪引くと鼻からやられるんですけどね、呼吸出来ないってツライ。。

今回は北欧フィンランドの国旗を。 フィンランドと言えばムーミン！macの壁紙はムーミンのクリスマス仕様になってます。

以下ソースコード

<canvas id="finland" width="300" height="183" style="border: solid 1px #000;"></canvas>

CANVASでお絵描き part2

canvasでお絵描き第２弾！

今日はフランス国旗です。
フランス国旗の比率、きれいに三等分かと思いきや、
30:33:37と赤が少し多めなんですね。

青は自由。矢車草の色。
白は平等。マーガレットの色。
赤は博愛。ヒナゲシの色。

ソースコード

 function sample () {
 // 描画コンテキストの取得
 var canvas2 = document.getElementById("french");
 if (canvas2.getContext) {
  var context = canvas2.getContext("2d");
  // 青
  context.fillStyle = "rgb(0,35,149)";
  context.fillRect(0,0,90,200);
  // 白
  context.fillStyle = "rgb(255,255,255)";
  context.fillRect(90,0,99,200);
  // 赤
  context.fillStyle = "rgb(237,41,57)";
  context.fillRect(189,0,117,200);
 }
 }

<canvas id="french" width="300" height="200" style="border: solid 1px #000;"></canvas>

CANVASでお絵描き part1

html5のcanvasタグを使って日本国旗を描いてみました。
canvas面白い！

ソースコードは以下

 function sample () { 
 // 描画コンテキストの取得
 var canvas = document.getElementById('sample1');
 if (canvas.getContext) {
 var context = canvas.getContext('2d');

 // 色を指定する
 context.fillStyle = 'rgb(255,00,00)'; //塗りつぶしの色は赤

 // 左から150上から100の位置に、円を描く
 context.arc(150,100,60,Math.PI*2,false);
 context.fill();
 }
 }

 <canvas id="sample1" width="300" height="200" style="border: solid 1px #000;"></canvas>