涂鸦板简单实现 Html5编写属于自己的画画板

var color = "#000000";//初始化颜色  

 var size = 5;//初始化尺寸  

document.getElementById('color1').onchange = function () {  

color = this.value;  

 };  

 document.getElementById('size').onchange = function () {  

 size = this.value;  

 };  

 $.Draw.init();//初始化  

 var tag = false;//控制鼠标当前状态并起到开启油墨开关的作用  

  var current = {};//存储鼠标按下时候的点  

document.onmousedown = function (option) {//鼠标按下事件  

 current.x = option.x;  

current.y = option.y;  

 $.Draw.Cricle(option.x, option.y, size, color);  

 tag = true;  

 }  

 document.onmouseup = function () {//鼠标抬起事件  

 tag = false;  

 }  

document.onmousemove = function (option) {//鼠标移动事件  

 if (tag) {  

 if (size >= 0) {  

 $.Draw.Cricle(option.x, option.y, size, color);  

  }   

 }  

 }