HTML5のcanvasでお絵かきツール!簡単な作り方を書いておきます!①
HTML5のcanvasを利用してお絵かきツールを作ってみました。
プラグイン化しておいて誰でも使えるように公開しときます!
サイズ変更・色変更・色の数変更・線の太さ変更・画像への変換・操作取消・キャンバスのクリアなどだいたい簡単な機能はつけておきました。
まずは、お絵かきプラグインの使用方法から説明して、いつでも使えるようにしてしまいます。
その後、プログラムの一部をメモがてら説明します。
では、プラグインから用意します。
以下のスクリプトを全てコピーしてメモ帳などに張り付けたうえで、draw.jsという名前で保存してください。
draw.js
(function($) { $.extend({ drawPic: function drawPic(target,w,h,c){ w = w || 500; h = h || 300; c = c || 38; //target.css("overflow","hidden"); target.append("<div id='canvas_area'></div>"); $("#canvas_area").append("<div id='canvas_board'><canvas id='canvas'></canvas></div>") .append("<div id='colors'></div>") .append("<div id='btn_area'></div>"); $("#btn_area").append("<span id='line_width'>line-width : 10px</span>") .append("<span class='button' name='plus'>+</span>") .append("<span class='button' name='minus'>-</span>") .append("<span class='button' name='save'>SAVE</span>") .append("<span class='button' name='restore'>BACK</span>") .append("<span class='button' name='clear'>CLEAR CANVAS</span>"); var divide = c; var step = Math.floor(256*256*256/divide); var color_num = 256*256*256; var canvas_j = $("#canvas"); var canvas = canvas_j[0]; var context = canvas.getContext("2d"); var last_x,last_y; var color_size = Math.floor((w-2*divide)/divide); var btn_css; var currentImg = new Array(); var back_count = 0; var back_key; var line_width = 10; $("#canvas_area").css({ width:w+2, margin:"0 auto", overflow:"hidden", position:"relative" }); $("#canvas_board").css({ width:w, height:h, border:"1px solid #cccccc", borderRadius:"10px", marginBottom:"3px" }); canvas_j.attr({ width:w, height:h }); $("#colors").css({ width:(color_size + 2)*divide, margin:"0 auto", overflow:"hidden" }); $("#btn_area").css({ width:(color_size + 2)*divide, margin:"0 auto", textAlign:"right" }); $("#line_width").css({ color:"#333333", marginRight:"10px", fontSize:"12px" }); btn_css = "\ font-size:12px;\ font-family:Arial;\ font-weight:normal;\ -moz-border-radius:8px;\ -webkit-border-radius:8px;\ border-radius:8px;\ border:1px solid #337fed;\ padding:5px 14px;\ text-decoration:none;\ background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #3d94f6), color-stop(100%, #1e62d0) );\ background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );\ background:-ms-linear-gradient( top, #3d94f6 5%, #1e62d0 100% );\ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');\ background-color:#3d94f6;\ color:#ffffff;\ display:inline-block;\ text-shadow:1px 1px 0px #1570cd;\ -webkit-box-shadow:inset 1px 1px 0px 0px #97c4fe;\ -moz-box-shadow:inset 1px 1px 0px 0px #97c4fe;\ box-shadow:inset 1px 1px 0px 0px #97c4fe;\ filter:none;\ cursor:pointer;\ margin:3px;\ "; $(".button").attr("style",btn_css) .mouseover(onMouse).mouseout(outMouse); $("span[name='clear']").click(clearCanvas); $("span[name='plus']").click(plusLineWidth); $("span[name='minus']").click(minusLineWidth); $("span[name='restore']").click(canvasRestore); $("span[name='save']").click(saveImage); for(var i=0;i<divide;i++){ var color_16 = color_num.toString(16); color_16 = color_16=="1000000"?"000000":color_16; color_16 = color_16.length==5?color_16+"f":color_16; var color_style = "style='cursor:pointer;border:1px solid #cccccc;float:left;width:" + color_size + "px;height:" + color_size + "px;background:#" + color_16 + "'"; var color_box = "<p data-color='#" + color_16 + "' class='color_box' " + color_style + "></p>"; $("#colors").html(color_box + $("#colors").html()); color_num -= step; } $(".color_box").css({borderRadius:"10px"}) .mouseover(onMouse) .mouseout(outMouse) .click(changeColor); canvas_j.mousedown(logStart); function saveImage(){ var type = "image/png"; var img_src = canvas.toDataURL(type); if(!$("#image_display_area")[0]){ $("#canvas_area").append("<div id='image_display_area'></div>"); $("#image_display_area").css({ position:"absolute", top:0, left:0, background:"#2f160a", borderRadius:"10px", border:"3px solid #592912", padding:"5px" }).append("<div id='image_container'></div><span id='close_container'>close</span>"); $("#image_container").css({ background:"#ffffff", borderRadius:"5px", border:"1px solid #aaaaaa" }).append("<img src='' style='display:none' id='created_img' />") .animate({ width:w-16, height:h-16 },1000,"linear",function(){ $("#created_img").attr({ src:img_src, width:w-16, height:h-16 }).fadeIn(1000); }); $("#close_container").css({ position:"absolute", top:"10px", left:"10px", display:"none", cursor:"pointer" }).fadeIn(1000); $("#close_container").click(function(){ $("#image_display_area").fadeOut(500,function(){$(this).remove()}); }); } } function canvasRestore(){ back_key = back_count-2<0?10:back_count-2; context.putImageData(currentImg[back_key],0,0); back_count = back_key+1>10?0:back_key+1; } function changeColor(){ context.strokeStyle = $(this).attr("data-color"); $(".color_box").css("border","1px solid #cccccc"); $(this).css("border","1px solid #000000"); } function clearCanvas(){ context.clearRect(0,0,w,h) } function plusLineWidth(){ line_width++; line_width = line_width>=51?50:line_width; canvas.lineWidth = line_width; $("#line_width").html("line-width : " + line_width + "px"); } function minusLineWidth(){ line_width--; line_width = line_width<=0?1:line_width; canvas.lineWidth = line_width; $("#line_width").html("line-width : " + line_width + "px"); } function logStart(){ $(this).unbind("mousemove"); $(this).unbind("mouseup"); $(this).unbind("mouseout"); $(this).mousemove(printLog); $(this).mouseout(logEnd); $(this).mouseup(logEnd); } function printLog(e){ var x = e.offsetX; var y = e.offsetY; last_x = last_x?last_x:x; last_y = last_y?last_y:y; context.beginPath(); context.lineCap = "round"; context.lineWidth = line_width; context.moveTo(last_x,last_y); context.lineTo(x,y); context.stroke(); last_x = x; last_y = y; } function logEnd(e){ $(this).unbind("mousemove"); last_x = undefined; last_y = undefined; if(e.type=="mouseup"){ currentImg[back_count] = context.getImageData(0,0,w,h); back_count++; back_count = back_count>10?0:back_count; } } function onMouse(){ $(this).css("opacity","0.7") } function outMouse(){ $(this).css("opacity","1") } } }); })(jQuery);