用鼠标绘制圆形图案，可叠加产生不同色彩-JS特效-爱易网页

用鼠标绘制圆形图案，可叠加产生不同色彩

日期：2014-05-18　浏览次数：20202 次

以下是程序代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 body{
  font-family: 微软雅黑;
 }
 canvas{
  display:block;
  border:1px dotted skyblue;
 }
 </style>
</head>
<body>
 <h1>HTML5第4天[鼠标绘制圆形]</h1> 
 <p>鼠标拖动绘制图形</p>
<canvas id="canvas" width="500" height="400">
 
</canvas>
<img src="http://sandbox.runjs.cn/uploads/rs/167/znddwgfj/1.png
" alt="">
<img src="http://sandbox.runjs.cn/uploads/rs/167/znddwgfj/2.png" alt="">
<script src="http://www.nimojs.com/src/library/jquery-1.10.1.min.js"></script>

//记录圆心坐标
  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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

用鼠标绘制圆形图案，可叠加产生不同色彩

相关资料更多>

推荐阅读更多>