$(document).ready(function(){
document.ondragstart=function(){return false;}//ie禁止拖拽
document.onselectstart=function(){return false;}//ie禁止选定 canvas_size={x:$("#canvas").width(),y:$("#canvas").height()};
canvas_offset={x:$("#canvas")[0].offsetLeft,y:$("#canvas")[0].offsetTop};
origin={x:0,y:0}
end={x:0,y:0}
type=0;
        drawable=false;
        color_changeable=false;
        
canvas=document.getElementById("canvas");
canvas2=document.getElementById("canvas2"); context=canvas.getContext('2d');
context.strokeStyle="#00aeef";
fill_canvas("#ffffff");
context.lineWidth = 1;
context2=canvas2.getContext('2d');
context2.strokeStyle="#00aeef";
context2.lineWidth = 1;
canvas_rgb={r:1,g:1,b:1};
$(canvas2).bind('mousedown',function(event){
drawable=true;
origin.x=event.clientX-canvas_offset.x;
                 origin.y=event.clientY-canvas_offset.y;
if(type == 7){
var canvasX = Math.floor(event.pageX - canvas_offset.x);
var canvasY = Math.floor(event.pageY - canvas_offset.y);
var imageData = context.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
$("#color_span").css("background-color","rgb(" + pixel[0] + "," + pixel[1] + "," + pixel[2] + ")");
change_attr(-1,-1,"rgb(" + pixel[0] + "," + pixel[1] + "," + pixel[2] + ")");
}
});
$(canvas2).bind('mouseup',function(event){
canvas_backup=context.getImageData(0, 0, canvas.width, canvas.height);
});
$(document).bind('mouseup',function(event){
if((type==1||type==3||type==4)&&drawable==true){
context2.clearRect(0,0,canvas_size.x,canvas_size.y);
end.x=event.clientX-canvas_offset.x;
         end.y=event.clientY-canvas_offset.y;
draw(context);
}else if(type==8 && drawable==true){
draw(context);
}

drawable=false;
color_changeable=false;
});
        $(document).bind("mousemove",function(event){
            if(drawable==false)return;
            if(type==0){
             end.x=event.clientX-canvas_offset.x;
             end.y=event.clientY-canvas_offset.y;
     draw(context);
     origin.x=end.x;origin.y=end.y;
            }else if(type==1||type==3||type==4||type==5){
             end.x=event.clientX-canvas_offset.x;
             end.y=event.clientY-canvas_offset.y;
             if(type==5){
             fill_canvas('#ffffff',end.x-10,end.y-10,20,20);return;
             }else
             context2.clearRect(0,0,canvas_size.x,canvas_size.y);
     draw(context2);
            }
            else if(type==2){
             end.x=event.clientX-canvas_offset.x;
             end.y=event.clientY-canvas_offset.y;
     draw(context);
            }else if(type==6){
if(!window.dateTime)
window.dateTime = new Date();
if((new Date() - window.dateTime) > 20){
window.dateTime = new Date();
context.drawImage(heart, event.clientX-canvas_offset.x-heart.width/2, event.clientY-canvas_offset.y-heart.height/2);
}
}
        }); var img = new Image();
img.src="img/color.bmp";
$(img).bind("load",function(){
canvas_color=document.getElementById("canvas_color");
context3=canvas_color.getContext('2d');
context3.drawImage(this, 0, 0,this.width,this.height);
canvas_color_data = context3.getImageData(0, 0, canvas_color.width, canvas_color.height);
$(canvas_color).bind("mousedown",function(event){
var idx = ((event.clientX-canvas_color.offsetLeft-1) + (event.clientY-canvas_color.offsetTop-1) * canvas_color_data.width) * 4;
                var r = canvas_color_data.data[idx + 0];
                var g = canvas_color_data.data[idx + 1];
                var b = canvas_color_data.data[idx + 2];
                $("#color_span").css("background-color","rgb("+r+","+g+","+b+")");
                change_attr(-1,-1,"rgb("+r+","+g+","+b+")");
                color_changeable=true;
});
$(canvas_color).bind("mousemove",function(event){
if(color_changeable==false)
return;
var x=event.clientX-canvas_color.offsetLeft-1;
if(x>=canvas_color_data.width||x<0)
return;
var y=event.clientY-canvas_color.offsetTop-1;
if(y>=canvas_color_data.height||y<0)
return;
var idx = (x + y * canvas_color_data.width) * 4;
                var r = canvas_color_data.data[idx + 0];
                var g = canvas_color_data.data[idx + 1];
                var b = canvas_color_data.data[idx + 2];
                $("#color_span").css("background-color","rgb("+r+","+g+","+b+")");
                change_attr(-1,-1,"rgb("+r+","+g+","+b+")");
});
}); $("#close_window").bind("click",function(){
$("#forbiden_back").fadeOut(300);
$("#pic_url").val('');
});

$("#open_pic").bind("click",function(){
$("#forbiden_back").fadeOut(300);
open_img($("#pic_url").val());
$("#pic_url").val('');
}); $("#size_bar").bind("mousedown",function(event){
var thumb=$("#size_thumb");
var main_w=$(this).width();
var mainLeft=$(this).offset().left;
thumb.css("left",event.clientX-mainLeft-thumb.width()/2+"px");
$("#size_span").html(Math.ceil($(thumb).position().left/main_w*5)+1);
change_attr(-1,$("#size_span").html(),-1);
$(document).bind("mousemove",size_bar_move);
$(document).bind("mouseup",function unbind(event){
$(document).unbind("mousemove",size_bar_move);
$(document).unbind("mouseup",unbind);
});
}); }); function size_bar_move(e){
var thumb=$("#size_thumb");
var main_w=$("#size_bar").width();
var mainLeft=$("#size_bar").offset().left;
if(e.clientX-mainLeft<0)
thumb.css("left",-thumb.width()/2+"px");
else if(e.clientX-mainLeft>main_w)
thumb.css("left",main_w-thumb.width()/2+"px");
else
thumb.css("left",e.clientX-mainLeft-thumb.width()/2+"px");
$("#size_span").html(Math.ceil($(thumb).position().left/main_w*5)+1);
change_attr(-1,$("#size_span").html(),-1);
}

function draw(context){
if(type==0||type==1||type==2){
context.beginPath();
        context.moveTo(origin.x,origin.y);
        context.lineTo(end.x,end.y);
        context.stroke();
        }else if(type==3){
    var k = ((end.x-origin.x)/0.75)/2,
       w = (end.x-origin.x)/2,
      h = (end.y-origin.y)/2,
      x=(end.x+origin.x)/2,
      y=(end.y+origin.y)/2;
context.beginPath();
context.moveTo(x, y-h);
context.bezierCurveTo(x+k, y-h, x+k, y+h, x, y+h);
context.bezierCurveTo(x-k, y+h, x-k, y-h, x, y-h);
context.closePath();
context.stroke();
        }else if(type==4){
         context.beginPath();
        context.rect(origin.x,origin.y,end.x-origin.x,end.y-origin.y);
        context.stroke();
        }else if(type==6){
context.drawImage(heart, origin.x, origin.y);
}else if(type==8){
context.font= $("#pbig").val() + "px Verdana";
context.fillStyle = context.strokeStyle
context.fillText($("#ptext").val(), origin.x,origin.y);
}
} function change_attr(tp,sz,clr){
if(tp!=-1)
type=tp;
if(clr!=-1){
context.strokeStyle=clr;
context2.strokeStyle=clr;
}
if(sz!=-1){
context.lineWidth = sz;
context2.lineWidth = sz;
}
} function clear_canvas(){
context.clearRect(0,0,canvas_size.x,canvas_size.y);
} function fill_canvas(col,orix,oriy,w,h){
context.fillStyle=col;
context.fillRect(orix,oriy,w,h);
} function get_gaussian_average(can_data,g,gaussian_array,channel,x,y){
var t=0;
for(var i=0;i<2*g+1;i++){
for(var j=0;j<2*g+1;j++){
var idx = (x+i-g + (y+j-g) * can_data.width) * 4;
t+=can_data.data[idx + channel]*gaussian_array[i][j];
}
}
return t;
} function open_img(url){
var img = new Image();
img.src=url;
$(img).bind("load",function(){
fill_canvas('#ffffff',0,0,600,450);
if(img.width/600 >= img.height/450){
var h=450;
var w=img.width/(img.height/450);
}else{
var w=600
var h=img.height/(img.width/600);
}
context.drawImage(this, 0, 0, w, h);
//canvas_backup=context.getImageData(0, 0, canvas.width, canvas.height);
});
} heart = new Image();
heart.src="img/heart.png"; function selected(el){
$(".gray").removeClass("selected");
$(el).addClass("selected");
$("#pbig").hide();
$("#ptext").hide();
} function setText(el){
if($("#pbig").length == 0){
$(document.body).append($("<input title='输入文字大小' id='pbig' type='text' value='30' />").css({position:"absolute",left:$(el).offset().left,top:$(el).offset().top + 35, width:20}));
$(document.body).append($("<input placeholder='输入文字' id='ptext' type='text' />").css({position:"absolute",left:$(el).offset().left,top:$(el).offset().top + 60, width:100}));
}else{
$("#pbig").show();
$("#ptext").show();
}
}
————————————————————————
求大侠帮忙弄个注释啊