Community Learn Tools Library Leisure
search
English
javascript - canvas画图并实现hover，怎么做呢？
巴扎黑
巴扎黑 2017-04-11 11:41:07
0
4
743

鼠标移到小方格内，小方格内颜色变为红色，离开恢复原色，用canvas怎么实现？
注：只能用canvas实现。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="950" style="border:1px solid #d3d3d3;margin-top:10px">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

let sAngle = 0;
let eAngle = Math.PI/90;
for(let j=0;j<5;j++){
  for(let i=0;i<180;i++){
  ctx.lineWidth = 0.2;
  ctx.beginPath();
  if(j==0){
    ctx.strokeStyle = "red";
  }else{
    ctx.strokeStyle = "gray";
  }
  if(j==4){
    ctx.fillStyle = "red";
    ctx.strokeStyle = "red";   
    ctx.arc(100,100,50-j*8,0,2*Math.PI);
    ctx.fill();
    ctx.closePath()
    continue;
  } 
  ctx.arc(100,100,80-j*15,sAngle,eAngle);
  ctx.stroke();
  ctx.closePath()
  sAngle = eAngle+Math.PI/90;
  eAngle = eAngle+2*Math.PI/90;
  }
}
for(let i=0;i<8;i++){
  ctx.beginPath();
  ctx.lineWidth = 0.5;
  ctx.moveTo(100-80*Math.cos(i*Math.PI/4),100-
  80*Math.sin(i*Math.PI/4));
  ctx.strokeStyle = "green";    
 ctx.lineTo(100+80*Math.cos(i*Math.PI/4),100+80*Math.sin(i*Math.PI/4));
  ctx.stroke();
  ctx.closePath();
}
var domX = c.getBoundingClientRect().left+document.documentElement.scrollLeft;
var domY = c.getBoundingClientRect().left+document.documentElement.scrollLeft;


</script> 

</body>
</html>
巴扎黑
巴扎黑

reply all(4)
Peter_Zhu
Peter_Zhu2017-04-11 11:43:07 4 floor

监听mousemove事件，然后判断当前在那个方格内

Like +0
Add Reply
迷茫
迷茫2017-04-11 11:43:07 3 floor

用mousemouve事件，然后可以从event上获取当前鼠标位置。然后判断当前的xy在那个区域块中，给区域块改变颜色，同时将其他区域块改变成默认颜色

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
canvas.onmousemove=function(event){
 //console.log(event);
 var _pagex = event.pageX;
 var _pagey = event.pageY;
 var _pageLengthX = (_pagex / 40)|0;
 var _pageLengthY = (_pagey / 40)|0;
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

ctx.fillStyle='#FFFFFF';
ctx.fillRect(
_pageLengthX*40,
_pageLengthY*40,
40,
40);
}
</script>

</body>
</html>
Like +0
Add Reply
黄舟
黄舟2017-04-11 11:43:07 2 floor

需要事件你应该知道，然后就是event这个参数中，会有event.pageX和Y，根据你方格的区域判断距离的差值是否在你的这个方格内，然后绘图这个方块就可以了。记住画图钱save和restore比较好。

Like +0
Add Reply
迷茫
迷茫2017-04-11 11:43:07 1 floor 
<!DOCTYPE html>
<html>
<body>

<canvas id="canvas">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

!function () {

  class Panel {
    constructor(canvas, x, y, r, n) {
      this.canvas = canvas;
      this.ctx = canvas.getContext('2d');
      this.ratio = 1;
      this.initScreenRatio();
      this.x = x * this.ratio;
      this.y = y * this.ratio;
      this.r = r * this.ratio;
      this.n = n * this.ratio;
      this.dr = Math.round(this.r / this.n);
      this.basePos = this.canvas.getBoundingClientRect();
      this.prePos = null;
      this.drawPanel();
      this.initEvent();
    }

    initScreenRatio() {
      const devicePixelRatio = window.devicePixelRatio || 1;
      const backingStoreRatio = this.ctx.webkitBackingStorePixelRatio ||
        this.ctx.mozBackingStorePixelRatio ||
        this.ctx.msBackingStorePixelRatio ||
        this.ctx.oBackingStorePixelRatio ||
        this.ctx.backingStorePixelRatio || 1;

      const ratio = devicePixelRatio / backingStoreRatio;
      this.canvas.style.borderWidth = 0;
      this.canvas.style.width = this.canvas.offsetWidth;
      this.canvas.style.height = this.canvas.offsetHeight;
      this.canvas.width = ratio * this.canvas.offsetWidth;
      this.canvas.height = ratio * this.canvas.offsetHeight;
      this.ratio = ratio;
    }


    drawPanel(clear) {
      const {x, y, ctx, r, dr, n,actived} = this;
      const _2PI = 2 * Math.PI;
      let i = 1;
      if(clear!==false){
        this.clear();
      }
      ctx.save();
      ctx.strokeStyle = '#ddd';
      ctx.setLineDash([8, 4]);

      //圆盘
      ctx.save();
      for (; i < n + 1; i++) {
        ctx.beginPath();
        ctx.arc(x, y, i * dr, 0, _2PI);
        if(i===n){
          ctx.strokeStyle = actived?'#f00':'#ddd';
        }
        ctx.stroke();
      }
      ctx.restore();
      //分割线
      ctx.translate(x, y);
      ctx.setLineDash([]);
      for (i = 0; i < 8; i++) {
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(0, r);
        ctx.stroke();
        ctx.rotate(_2PI / 8);
      }
      ctx.restore();
    }

    clear(){
      this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
    }

    getArea(px, py) {
      const {basePos, x, y, dr} = this;
      const dx = (px - basePos.left) * this.ratio - x;
      const dy = (py - basePos.top) * this.ratio - y;
      const d = Math.ceil(Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)));
      let anum = Math.ceil(d / dr);
      if (dx === 0) {
        anum = 0;
      }
      const actan = dx > 0 ? (dy > 0 ? Math.atan(dy / dx) : 2 * Math.PI + Math.atan(dy / dx)) : Math.PI + Math.atan(dy / dx);
      return {
        n: anum > this.n ? null : anum,
        rotate: Math.floor(actan * 4 / Math.PI)
      }
    }

    fillCellPath(pos, col) {
      const {ctx, dr, x, y} = this;
      if (pos.n) {
        this.clear();
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(pos.rotate * Math.PI / 4);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.arc(0, 0, (pos.n) * dr, 0, Math.PI / 4);
        ctx.closePath();
        ctx.fillStyle = col || '#000';
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.arc(0, 0, (pos.n - 1) * dr, 0, Math.PI / 4);
        ctx.closePath();
        ctx.fillStyle = '#fff';
        ctx.fill();
        ctx.restore();
        this.drawPanel(false);
      }
    }

    initEvent() {
      this.canvas.addEventListener('mousemove', (e) => {
        const pos = this.getArea(e.pageX, e.pageY);
        if (!this.prePos || this.prePos.n !== pos.n || this.prePos.rotate !== pos.rotate && pos.n) {
          this.actived = true;
          if (this.prePos) {
            this.fillCellPath(this.prePos, '#fff');
          }
          this.fillCellPath(pos, '#000');
          this.prePos = pos;
        }else if(!pos.n){
          this.actived = false;
          this.drawPanel();
        }
      })
    }

  }


  const canvas = document.getElementById('canvas');
  const panel = new Panel(canvas, 100, 100, 250, 5);

} ()


</script> 

</body>
</html>

谁能解释下

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template