HTML5 Canvas 鼠标绘制圆形

2024-09-05 12:19:04

字体：大中小

来源：转载

供稿：网友

HTML5 Canvas 鼠标绘制圆形，在网页中的空白区域内按住鼠标左键拖动鼠标即可画出圆形，圆的半径根据你的拖动距离而决定，背景色和边框色是由数组来随机决定，这样拖出来的图形才更智能化一些。别忘了，这里使用了jquery前端库，版本为1.6.2，当然高版本也是可以的。代码有点乱，自己优化下吧。

<!doctype html><html lang="en"><head><title>HTML5鼠标绘制圆形</title><style>canvas{display:block;border:1px dotted skyblue;}</style></head><body><h1>HTML5鼠标绘制圆形</h1>	<p>拖动你的鼠标即可绘制出图形</p><canvas id="canvas" width="500" height="400"></canvas><script src="/ajaxjs/jquery-1.6.2.min.js"></script><script>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			})		})	})})</script></body></html>

上一篇：HTML5绘制星空

下一篇：CSS实现的网页水平翻转效果