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);
