脚本代码(For )如下:
Document
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
})
})
})
})
//- -！代码很乱要优化
