SlideShare une entreprise Scribd logo
1  sur  30
Télécharger pour lire hors ligne
HTML5のCanvas入門
- Img画像を編集してみよう 2013/12/18(水) HTML5+α @福岡 - 第21回 LT資料
Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com
  自己紹介です
========
江原と申します。(@itokami1123)
福岡で業務アプリをJavaScriptで作って暮らしてます。
来年からはJava屋に転職。今は、名刺無いです…。
こんな野望が持ってます。
・業務系WebアプリのUIをモット使いやすくしたい!
・JavaとJavaScriptを仲良くさせたい!
・コミュニティの力で福岡を一つに!景気上昇↑雇用拡大↑
・生涯、福岡でエンジニアしたい!
本日の内容
========
HTML5のCanvas機能を使うとImgタグの画像編集が
サーバの力を借りなくても
クライアント(JavaScript)側で行うことが出来ます。
簡単ですがその手順や注意事項について説明させてください!
(

HTML5のCanvasて何?
HTML5のCanvasとは
ブラウザ上に図を描くための機能です。
JavaScriptで図形や画像の描画が出来ます!
例えば、ブラウザに線とか引けます。
!
<canvas id="sample" width="200" height="150"></canvas>

!
var canvas = document.getElementById('sample');
!
var ctx = canvas.getContext('2d');
!
描画対照を選択!
ctx.beginPath();
!
ctx.moveTo(10, 10);
ctx.lineTo(40, 40);
!
ctx.stroke();
例えば、ブラウザに線とか引けます。
!
<canvas id="sample" width="200" height="150"></canvas>

!
var canvas = document.getElementById('sample');
!
var ctx = canvas.getContext('2d');
!
ctx.beginPath();
描画道具
!
Canvas
描画対照から
Context
ctx.moveTo(10, 10);
描画する道具を
ctx.lineTo(40, 40);
!
いただきます。
ctx.stroke();
例えば、ブラウザに線とか引けます。
!
<canvas id="sample" width="200" height="150"></canvas>

座標位置を設定して描画できます。
!

!
線が引けた!
var canvas = document.getElementById('sample');
!
var ctx = canvas.getContext('2d');
!
ctx.beginPath();
!
ctx.moveTo(10, 10);
ctx.lineTo(40, 40);
!
ctx.stroke();
(

ふーん、こんなんで画像編集できんの?
ではCanvasで画像編集してみましょ〜!
imgとCanvasの下準備…。
(512px)

(512px) のpngを用意しました。

九九衰弱 -iPhoneアプリ https://itunes.apple.com/jp/app/99suizyaku/id571962674
九九の書かれたカードでする神経衰弱ゲーム。間に合わないと爆破しちゃうぞ。

HTMLとCSSはこんな感じで用意しました。
<img id="source_img" />
<canvas id="edit_canvas" width="200" height="200" >
</canvas>
img{
Canvas解像度(200px) ×(200px)
width: 200px; height: 200px;
box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.5);
}
canvas{
画面に表示するサイズ
width: 200px; height: 200px;
box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.5);
}
imgデータをロードして…

var $img = $('#source_img');
!
$img.load( drawCanvas );
!
$img.attr(
"src",
"http://jsrun.it/assets/3/F/d/Q/3FdQP.png"
);
!

imgタグに 画像を設定!
imgがload完了後 drawCanvas関数を呼びます。
imgデータをロードしてからのCanvas描画!

function drawCanvas( event){

Eventからimgタグを取得!

var $img = $( event.target),
img = $img[0];

Canvas描画道具取得

var $canvas = $( "#edit_canvas");
var ctx = $canvas[0].getContext("2d");
ctx.drawImage( img, 0, 0 );
}

imgデータを使ってCanvaに描画!
そのまま貼付けしてみると…
function drawCanvas( event){
var $img = $( event.target),

imgデータを (0,0)の位置に貼付け
img = $img[0];
Canvasは 200x200なのではみでます!
var $canvas = $( "#edit_canvas");

var ctx = $canvas[0].getContext("2d");
ctx.drawImage( img, 0, 0 );
}

Σ

(
貼付け先の幅と高さを指定してあげると…
function drawCanvas( event){
var $img = $( event.target),

imgデータを (0,0)の位置に
img = $img[0];
幅200px 高さ200pxで描画!

var $canvas = $( "#edit_canvas");

var ctx = $canvas[0].getContext("2d");
ctx.drawImage( img, 0, 0 , 200, 200);
}

(
爆弾だけ切り取りたい場合は…
function drawCanvas( event){
var $img = $( event.target),

imgの(12,332)から幅高さ100pxを
img = $img[0];
幅200px 縦200pxで描画!

var $canvas = $( "#edit_canvas");

var ctx = $canvas[0].getContext("2d");
ctx.drawImage(img, 12,332,100,100, 0,0,200,200);
}

(
(

あっ画像の向き間違えた…
大丈夫!画像を回転出来ます!
30度、60度、90度で回転させてみましょう〜!
ctx.rotate(

30 * Math.PI / 180);

ctx.drawImage( img, 0, 0 , 200, 200);

ctx.rotate(

60 * Math.PI / 180);

ctx.drawImage( img, 0, 0 , 200, 200);

ctx.rotate(

90 * Math.PI / 180);

ctx.drawImage( img, 0, 0 , 200, 200);

(

あれっ?消えたよ..
左上(0,0)を中心に回るみたいですね!
ctx.rotate(

30 * Math.PI / 180);

ctx.drawImage( img, 0, 0 , 200, 200);

(0,0)
だったら下の手順で行けそうですね!
①x,y座標を-100px ずらす

②90度回転!

 ③x,y座標を +100pxずらす
(表示されるとこに移動する)
さっきのイメージをコードにして…
①x,y左上に移動して..

ctx.translate( -100, -100 );

ctx.rotate(

90 * Math.PI / 180);

ctx.translate(

100,

100 );

②90度回転!

③表示できる位置に戻す

ctx.drawImage( img, 0, 0 , 200, 200);

!?表示されない (

あれっ!?
実は変換は逆に設定する必要があるのです。
ctx.translate(

ctx.rotate(

100,

100 );

③表示できる位置に戻す

90 * Math.PI / 180);

②90度回転!

ctx.translate( -100, -100 );

①x,y左上に移動して..
ctx.drawImage( img, 0, 0 , 200, 200);

\出来た/
(
(

せっかく加工した画像保存したいなぁ
大丈夫!画像を取り出せます!
Canvasの描画内容をBase64形式で取得出来ます。
var $canvas = $( "#edit_canvas");
var ctx = $canvas[0].getContext("2d");
ctx.translate(
ctx.rotate(

100,

100 );

90 * Math.PI / 180);

Base64形式で取得!
ctx.translate( -100, -100 );
ctx.drawImage( img, 0, 0 , 200, 200);
var base64Data = $canvas[0].toDataURL("image/png");
$('#out_img').attr( "src", base64Data);
canvasタグ

imgタグ
この例は、作成したBase64形式のデー
タをimgタグのsrcに指定しています。
文字列なのでサーバに送信してサーバ
側でPNG画像にする事も可能です。
まとめ
まとめ
========
・Canvasは自由に図形を描画する事が出来ます。
・CanvasはImgタグ画像を取り込む事が出来ます。
・Canvasに取り込めば画像を回転したり切り取ったり出来ます。
・画像変換の指定は逆の順番で書きましょう。
・加工した画像 canvas.toDataURL() で取り出せます。
HTML5のCanvasが使えるブラウザは結構多いと思います!
うまく使えばサーバの負荷を減らす事が出来そうですね!

http://fmbip.com/litmus/
これで発表はおしまいです!
ご清聴ありがとうございました!

Contenu connexe

Tendances

絶対に描いてはいけないグラフ入りスライド24枚
絶対に描いてはいけないグラフ入りスライド24枚絶対に描いてはいけないグラフ入りスライド24枚
絶対に描いてはいけないグラフ入りスライド24枚itoyan110
 
【Unity道場】ゲーム制作に使う数学を学習しよう
【Unity道場】ゲーム制作に使う数学を学習しよう【Unity道場】ゲーム制作に使う数学を学習しよう
【Unity道場】ゲーム制作に使う数学を学習しようUnity Technologies Japan K.K.
 
Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話torisoup
 
人それぞれの競プロとの向き合い方
人それぞれの競プロとの向き合い方人それぞれの競プロとの向き合い方
人それぞれの競プロとの向き合い方Kensuke Otsuki
 
DAUを評価指標から捨てた会社の話 #tokyowebmining
DAUを評価指標から捨てた会社の話 #tokyowebminingDAUを評価指標から捨てた会社の話 #tokyowebmining
DAUを評価指標から捨てた会社の話 #tokyowebminingTokoroten Nakayama
 
Prophet入門【Python編】Facebookの時系列予測ツール
Prophet入門【Python編】Facebookの時系列予測ツールProphet入門【Python編】Facebookの時系列予測ツール
Prophet入門【Python編】Facebookの時系列予測ツールhoxo_m
 
次世代ゲームにおける自動生成技術
次世代ゲームにおける自動生成技術 次世代ゲームにおける自動生成技術
次世代ゲームにおける自動生成技術 Youichiro Miyake
 
F.E.A.Rにおけるゴール指向プランニング
F.E.A.Rにおけるゴール指向プランニングF.E.A.Rにおけるゴール指向プランニング
F.E.A.Rにおけるゴール指向プランニングYouichiro Miyake
 
Doozy UI 使おうぜ! #unity_lt
Doozy UI 使おうぜ! #unity_ltDoozy UI 使おうぜ! #unity_lt
Doozy UI 使おうぜ! #unity_lttorisoup
 
Kanban Vs Scrum日本語版
Kanban Vs Scrum日本語版Kanban Vs Scrum日本語版
Kanban Vs Scrum日本語版Hiroki Kondo
 
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術Unity Technologies Japan K.K.
 
Python入門 : 4日間コース社内トレーニング
Python入門 : 4日間コース社内トレーニングPython入門 : 4日間コース社内トレーニング
Python入門 : 4日間コース社内トレーニングYuichi Ito
 
静的型つき組版処理システムSATySFi @第61回プログラミング・シンポジウム
静的型つき組版処理システムSATySFi @第61回プログラミング・シンポジウム静的型つき組版処理システムSATySFi @第61回プログラミング・シンポジウム
静的型つき組版処理システムSATySFi @第61回プログラミング・シンポジウムT. Suwa
 
ダブル配列の実装方法
ダブル配列の実装方法ダブル配列の実装方法
ダブル配列の実装方法Higashiyama Masahiko
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門Masahito Zembutsu
 
Deep Learning による視覚×言語融合の最前線
Deep Learning による視覚×言語融合の最前線Deep Learning による視覚×言語融合の最前線
Deep Learning による視覚×言語融合の最前線Yoshitaka Ushiku
 
Pydata_リクルートにおけるbanditアルゴリズム_実装前までのプロセス
Pydata_リクルートにおけるbanditアルゴリズム_実装前までのプロセスPydata_リクルートにおけるbanditアルゴリズム_実装前までのプロセス
Pydata_リクルートにおけるbanditアルゴリズム_実装前までのプロセスShoichi Taguchi
 
事業成長にコミットするエンジニア組織への道のり
事業成長にコミットするエンジニア組織への道のり事業成長にコミットするエンジニア組織への道のり
事業成長にコミットするエンジニア組織への道のりRecruit Lifestyle Co., Ltd.
 
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計UnityTechnologiesJapan002
 

Tendances (20)

絶対に描いてはいけないグラフ入りスライド24枚
絶対に描いてはいけないグラフ入りスライド24枚絶対に描いてはいけないグラフ入りスライド24枚
絶対に描いてはいけないグラフ入りスライド24枚
 
【Unity道場】ゲーム制作に使う数学を学習しよう
【Unity道場】ゲーム制作に使う数学を学習しよう【Unity道場】ゲーム制作に使う数学を学習しよう
【Unity道場】ゲーム制作に使う数学を学習しよう
 
Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話
 
人それぞれの競プロとの向き合い方
人それぞれの競プロとの向き合い方人それぞれの競プロとの向き合い方
人それぞれの競プロとの向き合い方
 
【Unity】Scriptable object 入門と活用例
【Unity】Scriptable object 入門と活用例【Unity】Scriptable object 入門と活用例
【Unity】Scriptable object 入門と活用例
 
DAUを評価指標から捨てた会社の話 #tokyowebmining
DAUを評価指標から捨てた会社の話 #tokyowebminingDAUを評価指標から捨てた会社の話 #tokyowebmining
DAUを評価指標から捨てた会社の話 #tokyowebmining
 
Prophet入門【Python編】Facebookの時系列予測ツール
Prophet入門【Python編】Facebookの時系列予測ツールProphet入門【Python編】Facebookの時系列予測ツール
Prophet入門【Python編】Facebookの時系列予測ツール
 
次世代ゲームにおける自動生成技術
次世代ゲームにおける自動生成技術 次世代ゲームにおける自動生成技術
次世代ゲームにおける自動生成技術
 
F.E.A.Rにおけるゴール指向プランニング
F.E.A.Rにおけるゴール指向プランニングF.E.A.Rにおけるゴール指向プランニング
F.E.A.Rにおけるゴール指向プランニング
 
Doozy UI 使おうぜ! #unity_lt
Doozy UI 使おうぜ! #unity_ltDoozy UI 使おうぜ! #unity_lt
Doozy UI 使おうぜ! #unity_lt
 
Kanban Vs Scrum日本語版
Kanban Vs Scrum日本語版Kanban Vs Scrum日本語版
Kanban Vs Scrum日本語版
 
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
【CEDEC2018】一歩先のUnityでのパフォーマンス/メモリ計測、デバッグ術
 
Python入門 : 4日間コース社内トレーニング
Python入門 : 4日間コース社内トレーニングPython入門 : 4日間コース社内トレーニング
Python入門 : 4日間コース社内トレーニング
 
静的型つき組版処理システムSATySFi @第61回プログラミング・シンポジウム
静的型つき組版処理システムSATySFi @第61回プログラミング・シンポジウム静的型つき組版処理システムSATySFi @第61回プログラミング・シンポジウム
静的型つき組版処理システムSATySFi @第61回プログラミング・シンポジウム
 
ダブル配列の実装方法
ダブル配列の実装方法ダブル配列の実装方法
ダブル配列の実装方法
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
 
Deep Learning による視覚×言語融合の最前線
Deep Learning による視覚×言語融合の最前線Deep Learning による視覚×言語融合の最前線
Deep Learning による視覚×言語融合の最前線
 
Pydata_リクルートにおけるbanditアルゴリズム_実装前までのプロセス
Pydata_リクルートにおけるbanditアルゴリズム_実装前までのプロセスPydata_リクルートにおけるbanditアルゴリズム_実装前までのプロセス
Pydata_リクルートにおけるbanditアルゴリズム_実装前までのプロセス
 
事業成長にコミットするエンジニア組織への道のり
事業成長にコミットするエンジニア組織への道のり事業成長にコミットするエンジニア組織への道のり
事業成長にコミットするエンジニア組織への道のり
 
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
 

Similaire à HTML5のCanvas入門 - Img画像を編集してみよう -

JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工Masayuki Maekawa
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanillaNaoki Matsuda
 
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカJavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカYuuichi Akagawa
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Kazunari Hara
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】Yasuhito Yabe
 
静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3yaju88
 
メディア芸術基礎 II Canvas + Javascriptで図形を描く
メディア芸術基礎 II Canvas + Javascriptで図形を描くメディア芸術基礎 II Canvas + Javascriptで図形を描く
メディア芸術基礎 II Canvas + Javascriptで図形を描くAtsushi Tadokoro
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたShinichi Sato
 
東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会Kazuyuki Honda
 
Imagemagickknowhow
ImagemagickknowhowImagemagickknowhow
ImagemagickknowhowYo Ya
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7Naoki Matsuda
 
スマホにおけるWebGL入門
スマホにおけるWebGL入門スマホにおけるWebGL入門
スマホにおけるWebGL入門Yohta Kanke
 
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描くAtsushi Tadokoro
 
GoImagickThumbnail
GoImagickThumbnailGoImagickThumbnail
GoImagickThumbnailYo Ya
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Daisuke Imai
 
WordBench Nagoya 201601
WordBench Nagoya 201601WordBench Nagoya 201601
WordBench Nagoya 201601kuma2515
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門Hiroki Toyokawa
 
go-thumber-imagick
go-thumber-imagickgo-thumber-imagick
go-thumber-imagickYo Ya
 

Similaire à HTML5のCanvas入門 - Img画像を編集してみよう - (20)

JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
 
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカJavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3
 
Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
 
メディア芸術基礎 II Canvas + Javascriptで図形を描く
メディア芸術基礎 II Canvas + Javascriptで図形を描くメディア芸術基礎 II Canvas + Javascriptで図形を描く
メディア芸術基礎 II Canvas + Javascriptで図形を描く
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
 
東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会
 
Imagemagickknowhow
ImagemagickknowhowImagemagickknowhow
Imagemagickknowhow
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
 
スマホにおけるWebGL入門
スマホにおけるWebGL入門スマホにおけるWebGL入門
スマホにおけるWebGL入門
 
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
 
GoImagickThumbnail
GoImagickThumbnailGoImagickThumbnail
GoImagickThumbnail
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
 
WordBench Nagoya 201601
WordBench Nagoya 201601WordBench Nagoya 201601
WordBench Nagoya 201601
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
 
go-thumber-imagick
go-thumber-imagickgo-thumber-imagick
go-thumber-imagick
 

Plus de Toshio Ehara

iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?Toshio Ehara
 
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料Toshio Ehara
 
Java電卓勉強会資料
Java電卓勉強会資料Java電卓勉強会資料
Java電卓勉強会資料Toshio Ehara
 
BABELで、ES2015(ES6)を学ぼう!
BABELで、ES2015(ES6)を学ぼう!BABELで、ES2015(ES6)を学ぼう!
BABELで、ES2015(ES6)を学ぼう!Toshio Ehara
 
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化Toshio Ehara
 
traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験Toshio Ehara
 
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験Toshio Ehara
 
AngularJS入門の巻2
AngularJS入門の巻2AngularJS入門の巻2
AngularJS入門の巻2Toshio Ehara
 
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っていますJenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っていますToshio Ehara
 
AngularJS入門の巻
AngularJS入門の巻AngularJS入門の巻
AngularJS入門の巻Toshio Ehara
 
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。Toshio Ehara
 
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃおAngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃおToshio Ehara
 
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!Toshio Ehara
 
福岡のIT勉強会情報の集め方(LT資料)
福岡のIT勉強会情報の集め方(LT資料)福岡のIT勉強会情報の集め方(LT資料)
福岡のIT勉強会情報の集め方(LT資料)Toshio Ehara
 
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発についてBACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発についてToshio Ehara
 
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)Toshio Ehara
 
JavaScriptのテストコード 一緒に勉強しませんか??
JavaScriptのテストコード 一緒に勉強しませんか??JavaScriptのテストコード 一緒に勉強しませんか??
JavaScriptのテストコード 一緒に勉強しませんか??Toshio Ehara
 
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜Toshio Ehara
 
LT Leap MotionとJavaScriptで遊ぼう!
LT Leap MotionとJavaScriptで遊ぼう!LT Leap MotionとJavaScriptで遊ぼう!
LT Leap MotionとJavaScriptで遊ぼう!Toshio Ehara
 
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~Toshio Ehara
 

Plus de Toshio Ehara (20)

iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
 
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料
 
Java電卓勉強会資料
Java電卓勉強会資料Java電卓勉強会資料
Java電卓勉強会資料
 
BABELで、ES2015(ES6)を学ぼう!
BABELで、ES2015(ES6)を学ぼう!BABELで、ES2015(ES6)を学ぼう!
BABELで、ES2015(ES6)を学ぼう!
 
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
 
traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験
 
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
 
AngularJS入門の巻2
AngularJS入門の巻2AngularJS入門の巻2
AngularJS入門の巻2
 
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っていますJenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っています
 
AngularJS入門の巻
AngularJS入門の巻AngularJS入門の巻
AngularJS入門の巻
 
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
 
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃおAngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
 
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
 
福岡のIT勉強会情報の集め方(LT資料)
福岡のIT勉強会情報の集め方(LT資料)福岡のIT勉強会情報の集め方(LT資料)
福岡のIT勉強会情報の集め方(LT資料)
 
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発についてBACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
 
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
 
JavaScriptのテストコード 一緒に勉強しませんか??
JavaScriptのテストコード 一緒に勉強しませんか??JavaScriptのテストコード 一緒に勉強しませんか??
JavaScriptのテストコード 一緒に勉強しませんか??
 
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
 
LT Leap MotionとJavaScriptで遊ぼう!
LT Leap MotionとJavaScriptで遊ぼう!LT Leap MotionとJavaScriptで遊ぼう!
LT Leap MotionとJavaScriptで遊ぼう!
 
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
 

Dernier

自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineerYuki Kikuchi
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfFumieNakayama
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...博三 太田
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?akihisamiyanaga1
 
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfFumieNakayama
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)Hiroshi Tomioka
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)UEHARA, Tetsutaro
 

Dernier (8)

自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
 
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
 

HTML5のCanvas入門 - Img画像を編集してみよう -