Más contenido relacionado
La actualidad más candente (20)
Similar a ㉗HTML5+jQueryでお絵かき (20)
Más de Nishida Kansuke (20)
㉗HTML5+jQueryでお絵かき
- 3. 注意事項
• この資料の中には、2013/01時点での事実が書いてあるつもりです
が、時代とともに移り変わる情報もあるので最新情報のチェックも
忘れずに!
• 主観に基づく事柄もあります。そんな場合は、この色でコメントす
るようにしています!
• ざっくり説明するために、簡単に説明しています。厳密にいうと
ちょっと違う部分もあるかと思います。でもまあ、だいたいあって
る(はず)。
• 過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない
話もあるので、その辺をターゲットにする場合は注意(無視してい
いと思うけど)
• リンクは日本語訳がある場合はそっちにリンクしています。公式情
報ではないので、仕事で使う場合は原文を確認しましょう。
- 6. HTML5+jQueryでお絵かき
• じゅんび
• せんをひくかんすう
• せんをひくには・・・
• せんをひこう!
• はみでたら
• いろえらびきのう
• おしたら色を変えよう
• ぺんのふとさを変えよう
• クリアをつくろう
• データのほぞん
• こまかいとこ
- 7. じゅんび①
<body>
<canvas id="canvas" width="480px" height="320px"></
canvas>
</body>
- 8. じゅんび②
<style>
body{
background-color:#BECBAD;
}
canvas{
margin:20px 20px 20px 30px;
box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);
}
</style>
- 9. じゅんび③
<script>
$(function(){
var canvas = $('#canvas').get(0);
var context = canvas.getContext('2d');
context.fillStyle = "rgb(255, 255, 255)";
context.fillRect(0, 0, canvas.width,
canvas.height);
});
</script>
- 10. かいせつ
var canvas = $('#canvas').get(0);
↑canvasのDOM elementを取得
var context = canvas.getContext('2d');
↑canvasのcontextを取得
context.fillStyle = "rgb(255, 255, 255)";
↑塗りつぶしの色を決めて
context.fillRect(0, 0, canvas.width, canvas.height);
↑(0,0)-(canvas.width, canvas.height)の矩形を塗りつぶし
- 17. こんなかんじ
$('#canvas').mousedown(function(e){
isDraw = true;
sx = e.pageX - $(this).offset().left;
sy = e.pageY - $(this).offset().top;
console.log(sx, sy);
e.preventDefault();
});
$('#canvas').mouseup(function() {
isDraw = false;
});
- 18. かいせつ①
• sx = e.pageX - $(this).offset().left;
マウスカーソルのページ上の座標
(pageX)から、canvasのページ上の座標
を引くことで、canvas上の座標を計算!
- 27. がめん①
.tools{
clear:both;
width:600px;
}
.color{
-moz-border-radius:0 50px 50px 50px;
-webkit-border-radius:0 50px 50px 50px;
border-radius:0 50px 50px 50px;
}
- 28. がめん②
.tools div{
float:left;
font-size:40px;
font-weight:bolder;
color:#fff;
margin:10px;
width:50px;
height:50px;
text-align:center;
line-height:50px;
border:5px solid #fff;
box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);
}
- 29. がめん③
#color1{
background-color:#F00;
}
#color2{
background-color:#F9C;
}
#color3{
background-color:#FF0;
}
#color4{
background-color:#FFF;
}
#color5{
background-color:#00F;
}
- 30. がめん④
#color6{
background-color:#0F0;
}
#color7{
background-color:#060;
}
#color8{
background-color:#000;
}
#color9{
background-color:#8D4B15;
}
- 31. がめん⑤
<div class="tools">
<div class="color" id="color1"></div>
<div class="color" id="color2"></div>
<div class="color" id="color3"></div>
<div class="color" id="color4"></div>
<div class="color" id="color5"></div>
<div class="color" id="color6"></div>
<div class="color" id="color7"></div>
<div class="color" id="color8"></div>
<div class="color" id="color9"></div>
</div>
- 35. こんなかんじ①
.select{
border-color:#66F !important;
}
$('.color').click(function() {
context.strokeStyle = $(this).css('background-color');
$('.color').removeClass('select');
$(this).addClass('select');
});
- 39. やってみよう①
.pen{
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}
#normal{
background-color:#555;
}
#bold{
background-color:#555;
}
- 41. やってみよう③
$('.pen').click(function() {
if($(this).attr('id') == 'normal'){
context.lineWidth = 2;
}else{
context.lineWidth = 6;
}
$('.pen').removeClass('select');
$(this).addClass('select');
});
- 45. やってみよう①
.clear{
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.file{
-moz-border-radius:0 0 0 0;
-webkit-border-radius:0 0 0 0;
border-radius:0 0 0 0;
}
- 46. やってみよう②
#clear{
background-color:#555;
font-size:10px !important;
}
#load{
background-color:#555;
font-size:10px !important;
}
#save{
background-color:#555;
font-size:10px !important;
}
- 47. やってみよう③
<div class="tools">
<div class="color" id="color1"></div>
<div class="color" id="color2"></div>
<div class="color" id="color3"></div>
<div class="color" id="color4"></div>
<div class="pen" id="normal">・</div>
<div class="pen" id="bold">●</div>
<div class="clear" id="clear">CLEAR</div>
<div class="color" id="color5"></div>
<div class="color" id="color6"></div>
<div class="color" id="color7"></div>
<div class="color" id="color8"></div>
<div class="color" id="color9"></div>
<div class="file" id="load">LOAD</div>
<div class="file" id="save">SAVE</div>
</div>
- 52. やってみよう
$('#load').click(function(){
var dataURL = localStorage.getItem('dataURL');
if(dataURL){
var img = new Image();
img.onload = function(){
context.drawImage(img, 0, 0);
}
img.src = dataURL;
alert("画像を読み込みました");
}else{
alert("保存された画像がありません");
}
});
$('#save').click(function(){
localStorage.setItem('dataURL', canvas.toDataURL('image/png'));
alert("画像を保存しました");
});
- 54. かいせつ①
$('#save').click(function(){
localStorage.setItem('dataURL', canvas.toDataURL('image/
png'));
});
• canvas.toDataURL( image/png )で、canvasの内容をDataURL
と言われる文字列に変換できる!
• localStorage.setItem(key, value)で、ローカルストレージに保存
ができる!
- 56. DataURLとは?
• 画像などのデータを、文字列にしてHTML
に埋め込む方式
• 大きなデータにはあまり向いてないが、小
さなデータを外部から取得してこなくても、
直接HTMLに含めることができる
• RFC2397 data URL スキームの翻訳
– http://d.hatena.ne.jp/tily/20071103/p1
- 57. かいせつ②
var dataURL = localStorage.getItem('dataURL');
↑ローカルストレージからデータ取得
if(dataURL){
↑データが存在したら
var img = new Image();
↑画像を作成
img.onload = function(){
↑画像がロードされた時のイベント
context.drawImage(img, 0, 0);
↑canvasに画像を書く
}
img.src = dataURL;
↑画像のURLを設定
}
参考:画像を使う
https://developer.mozilla.org/ja/Canvas_tutorial%3AUsing_images