js+canvas制作的用鼠标绘制圆形图案，可叠加产生不同色彩HTML5特效

稿源：互联网 2018-09-03 20:39:49 点击： 8580 撤稿纠错

一个很炫的鼠标绘制圆形图案特效，HTML5实现的。

以下讨论的是和鼠标绘制圆形叠加色彩 HTML5 canvas相关的js+canvas制作的用鼠标绘制圆形图案，可叠加产生不同色彩HTML5特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

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

<!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[鼠标绘制圆形]</h1> 
 <p>鼠标拖动绘制图形</p>
<canvas id="canvas" width="500" height="400">
 
</canvas>
<img src="http://js.alixixi.com/UploadPic/2018-9/20189320374615292.png" alt="">
<img src="http://js.alixixi.com/UploadPic/2018-9/20189320381477763.png" alt="">
<script src="http://www.alixixi.com/script/jquery-1.8.3.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>

关于js+canvas制作的用鼠标绘制圆形图案，可叠加产生不同色彩HTML5特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090392032.shtml方便下次再访问哦。

·上一篇： 用HTML5+canvas代码绘制的星空月亮图案特效代码
·下一篇： JS制作循环上下左右平移转圈的图层特效

js+canvas制作的用鼠标绘制圆形图案，可叠加产生不同色彩HTML5特效

文章分类LIST >>返回首页

最新游戏

最新新闻