html5给图片加圆圈,js+canvas制作的用鼠标绘制圆形图案，可叠加产生不同色

脚本代码(For Alixixi.com)如下:

body{

font-family: 微软雅黑;

}

canvas{

display:block;

border:1px dotted skyblue;

}

HTML5[鼠标绘制圆形]

鼠标拖动绘制图形

var nimo={};

nimo.queue=[];

nimo.storage={};//用于存储x坐标、y坐标、半径、背景色、边框色的存储器。

nimo.creatRandom=function(startInt,endInt){//生产随机数

var iResult;

iResult=startInt+(Math.floor(Math.random()*(endInt-startInt+1)));

return iResult

}

nimo.createCircle=function(x,y,radius){//绘制圆

nimo.context.beginPath();

nimo.context.arc(x,y,radius,0,2*Math.PI);

nimo.context.fill();

nimo.context.stroke();

}

nimo.draw=function(iRadius){

//绘制临时圆(mousemove所产生的临时圆)

nimo.context.clearRect(0,0,nimo.$canvas.width(),nimo.$canvas.height())

nimo.createCircle(nimo.storage.x,nimo.storage.y,nimo.storage.radius)

//绘制队列中保存的圆

var i=nimo.queue.length;

for(var i;i>0;i--){

var oTemp=nimo.queue[i-1];

nimo.context.fillStyle=oTemp.backgroundColor;

nimo.context.strokeStyle=oTemp.borderColor;

nimo.createCircle(oTemp.x,oTemp.y,oTemp.radius)

}

}

$(function(){

nimo.$Doc=$(document);

nimo.$canvas=$('#canvas')

nimo.context=nimo.$canvas.get(0).getContext('2d');

nimo.$canvas.attr({

'width':nimo.$Doc.width()

})

nimo.$canvas.on('mousedown',function(event){

var $this=$(this);

//记录圆心坐标

var iPageX=event.pageX;

var iPageY=event.pageY;

var oCanvasPosition=$this.position();

nimo.storage.x=iPageX-oCanvasPosition.left;

nimo.storage.y=iPageY-oCanvasPosition.top;

//随机生产背景色和边框色

var aRGB=[];

aRGB.push(nimo.creatRandom(0,255));

aRGB.push(nimo.creatRandom(0,255));

aRGB.push(nimo.creatRandom(0,255));

nimo.storage.backgroundColor='rgba('+aRGB[0]+','+aRGB[1]+','+aRGB[2]+',0.5)';

nimo.storage.borderColor='rgb('+aRGB[0]+','+aRGB[1]+','+aRGB[2]+')';

nimo.$Doc.on('mousemove.draw',function(event){

//存储计算得到的半径

var iPageX=event.pageX;

var iPageY=event.pageY;

var oCanvasPosition=$this.position();

var iMouseX=iPageX-oCanvasPosition.left;

var iMouseY=iPageY-oCanvasPosition.top;

var iRadiusX=Math.abs(nimo.storage.x-iMouseX)//圆心x坐标减去鼠标x坐标的绝对值等于半径

var iRadiusY=Math.abs(nimo.storage.y-iMouseY)

nimo.storage.radius=Math.sqrt(iRadiusX*iRadiusX+iRadiusY*iRadiusY);

nimo.context.fillStyle=nimo.storage.backgroundColor;

nimo.context.strokeStyle=nimo.storage.borderColor

nimo.draw();

})

nimo.$Doc.one('mouseup',function(){

nimo.$Doc.off('mousemove.draw');

nimo.queue.push({

x:nimo.storage.x,

y:nimo.storage.y,

radius:nimo.storage.radius,

backgroundColor:nimo.storage.backgroundColor,

borderColor:nimo.storage.borderColor

})

})

})

})

//- -！代码很乱要优化