canvasを触っていて、この機能を使えばお絵かきツールが作れるのでは？と考えていたトコロ、
いろいろなサイトでそういったプログラムが紹介されていた。
とりあえず、ドットインストールで紹介されていた「お絵かきツール」をそのまま作ってみました。
canvasでお絵かきツール
まるコピなので、ここから改造してオリジナリティを出すも良し、何かのサービスに組み込むのも良し。
ソースコード
<!DOCTYPE html>
<html lang="js">
<head>
<meta charset="utf-8">
<title>Doodle</title>
<style>
#mycanvas{
border:10px solid #999;
cursor:crosshair;
}
.thumbnail{
border:2px solid #999;
margin-right:5px;
}
</style>
</head>
<body>
<h1>Drawing</h1>
<p>
<select id="penColor">
<option value="black">黒</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="white">白</option>
</select>
<select id="penWidth">
<option value="1">細</option>
<option value="3">中</option>
<option value="5">太</option>
</select>
<input type="button" id="erace" value="消去" />
<input type="button" id="save" value="ギャラリーに追加" />
</p>
<canvas id="mycanvas" width="400" height="200">not canvas</canvas>
<div id="gellary"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="canvas.js"></script>
</body>
</html>
$(function(){
var canvas = document.getElementById("mycanvas");
if(!canvas || !canvas.getContext){return false}
var ctx = canvas.getContext("2d");
var startX,
startY,
x,
y,
borderWidth=10,
isDrawing = false;
$("#mycanvas")
.mousedown(function(e){
isDrawing = true;
startX = e.pageX - $(this).offset().left - borderWidth;
startY = e.pageY - $(this).offset().top - borderWidth;
})
.mousemove(function(e){
if(!isDrawing){return}
x = e.pageX - $(this).offset().left - borderWidth;
y = e.pageY - $(this).offset().top - borderWidth;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(x,y);
ctx.stroke();
startX = x;
startY = y;
})
.mouseup(function(){
isDrawing = false;
})
.mouseleave(function(){
isDrawing = false;
});
$("#penColor").change(function(){
ctx.strokeStyle = $(this).val();
});
$("#penWidth").change(function(){
ctx.lineWidth = $(this).val();
});
$("#erace").click(function(){
if(!confirm("本当に消去しますか？")){return}
ctx.clearRect(0,0,canvas.width,canvas.height);
});
$("#save").click(function(){
var img = $("<img>").attr({
width:100,
height:50,
src:canvas.toDataURL()
});
var link = $("<a>").attr({
href:canvas.toDataURL().replace("png/image","application/octet-stream"),
download:new Date().getTime()+".png"
});
$("#gellary").append(link.append(img.addClass("thumbnail")));
ctx.clearRect(0,0,canvas.width,canvas.height);
});
});
確認
無事に動作確認ができました。
canvasを使ってpng画像の作成まで行えるツールですが、使いみちはあまり無さそうです。
ここから画像解析などできると使いようはあるかもしれませんが・・・
サンプル
お絵かきツールサンプル
とりあえず、ソースコードも簡単なので、laboエリアに載せておきたいと思います。
ソースのコピペなどに使ってください。
0 件のコメント:
コメントを投稿