[HTML5] Canvas勉強メモ #2「お絵かきツール」

2016年1月17日

canvas Javascript テクノロジー プログラミング 特集

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エリアに載せておきたいと思います。 ソースのコピペなどに使ってください。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。