Question

我想在悬停时在canvas元素中制作阴影效果，当我将鼠标悬停在元素显示阴影中的特定元素时，删除画布中的阴影html5

注意：

具有多个元素的画布
on hover element在此元素中显示边框阴影，但在其他
将图像放在画布元素中或悬停其他元素从第一个

这是我尝试过的：

   <canvas id="collage" width="850" height="560"></canvas>
    var canvas = document.getElementById("collage");
    var ctx = canvas.getContext("2d");
    var canvasLeft = canvas.offsetLeft;
    var canvasTop = canvas.offsetTop;
    canvas.ondrop = drop;
    canvas.ondragover = allowDrop;

    $(document).ready(function(e) {

    $("#listImage img").live('mouseover',function(){
        imgid = this.id;
        img = document.getElementById(imgid);
        img.onmousedown = mousedown;
        img.ondragstart = dragstart;
    });

    design=1;
    canvasLayout(canvasDesign10);

    $("#maxphotos").live('change',function(){
        $('#designList').html('Loading...')
        $.ajax(
        {
            url : "walldecor3/getdesign",
            type: "POST",
            data : 'designid='+$(this).val(),
            success:function(data)
            {
                if (data !=0)
                {
                    $('#designList').html(data)
                }
                else
                {
                    alert("Sorry..! unable process your request");
                }
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                alert('Error : ' + jqXHR.status);
            }
        });
        return false;

    });


    $("#designList img").live('click',function(){
        imgid = this.id;
        if(imgid =="design10")
        {
            design =canvasDesign10;
        }
        else if(imgid =="design20")
        {
            design =canvasDesign20;
        }
        else if(imgid =="design21")
        {
            design =canvasDesign21;
        }
        else if(imgid =="design30")
        {
            design =canvasDesign30;
        }
        else if(imgid =="design31")
        {
            design =canvasDesign31;
        }
        else if(imgid =="design32")
        {
            design =canvasDesign32;
        }
        else if(imgid =="design33")
        {
            design =canvasDesign33;
        }
        else if(imgid =="design40")
        {
            design =canvasDesign40;
        }
        else if(imgid =="design41")
        {
            design =canvasDesign41;
        }
        else if(imgid =="design42")
        {
            design =canvasDesign42;
        }
        else if(imgid =="design43")
        {
            design =canvasDesign43;
        }
        else if(imgid =="design50")
        {
            design =canvasDesign50;
        }
        else
        {
            design =canvasDesign1;
        }
        cleareCanvas()
        canvasLayout(design);
    });


    $("#cmbProduct").live('change',function(){

        var clgproduct =$(this).val();
        var clgorientation =$("#cmbOrientation").val();
        var clgformat =$("#cmbFormat").val();

        $.ajax(
        {
            url : "walldecor3/getCollagePrice",
            type: "POST",
                data:    'clgproduct='+  clgproduct+'&clgorientation=       '+clgorientation+ '&clgformat='+clgformat,
            success:function(prdata)
            {
                $('#clgprice').html(prdata)
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                alert('Error : ' + jqXHR.status);
            }
        });
        return false;

    });

    $("#cmbOrientation").live('change',function(){
        var clgorientation =$(this).val();
        $.ajax(
        {
            url : "walldecor3/getOrientation",
            type: "POST",
            data : 'clgorientation='+clgorientation,
            success:function(fdata)
            {

                if (fdata !="")
                {
                    $('#cformat').html(fdata)
                }
                else
                {
                    alert("Sorry..! unable process your request");
                }
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                alert('Error : ' + jqXHR.status);
            }
        });
        return false;
    });
    $("#cmbFormat").live('change',function(){

        var clgproduct =$("#cmbProduct").val();
        var clgorientation =$("#cmbOrientation").val();
        var clgformat =$(this).val();

        $.ajax(
        {
            url : "walldecor3/getCollagePrice",
            type: "POST",
            data : 'clgproduct='+clgproduct+'&clgorientation='+clgorientation+'&clgformat='+clgformat,
            success:function(fdata)
            {
                $('#clgprice').html(fdata)
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                alert('Error : ' + jqXHR.status);
            }
        });
        return false;
    });




    function collides(rects, x, y) 
    {
    var isCollision = false;
    for (var i = 0, len = rects.length; i < len; i++) 
    {
        var left = rects[i].x, right = rects[i].x+rects[i].w;
        var top = rects[i].y, bottom = rects[i].y+rects[i].h;
        if (right >= x && left <= x && bottom >= y && top <= y) 
        {
            isCollision = rects[i];
        }
    }
    return isCollision;
    }
    //-change canvas layout--
    function canvasLayout(canvasDesign) 
    {

    // check if context exist
    if (canvas && canvas.getContext) 
    {
        // list of rectangles to render
        rects = canvasDesign;
        //alert(JSON.stringify(rects));
        // get context
        var context = canvas.getContext('2d');

        if (context) 
        {
          for (var i = 0, len = rects.length; i < len; i++) 
          {
            context.strokeStyle = rects[i].c;  
            context.strokeRect(rects[i].x, rects[i].y, rects[i].w, rects[i].h);
          }

        }

        canvas.addEventListener('mousemove', function(a) {

            console.log('mousemove: ' + a.offsetX + '/' + a.offsetY);

            var rect = collides(rects, a.offsetX, a.offsetY);
            if (a.offsetY > rect.y && a.offsetY < rect.y + rect.h &&      a.offsetX > rect.x && a.offsetX < rect.x + rect.w) 
            {
                //alert(rect.x+","+rect.y+","+rect.w+","+rect.h);
                context.strokeStyle = "#05EFFF";
                context.strokeRect(rect.x, rect.y, rect.w, rect.h);
            }
            else
            {
                context.strokeStyle = "#CCCCCC";
                context.strokeRect(rect.x, rect.y, rect.w, rect.h);
            }

        }, false);

        canvas.addEventListener('click', function(e) 
        {
            console.log('click: ' + e.offsetX + '/' + e.offsetY);
            var rect = collides(rects, e.offsetX, e.offsetY);
            if (rect) 
            {
                if(e.offsetX > (canvas.width/2))
                {
                    $('#editer').css('left','');
                    $('#editer').css('right','-10%');
                    $('#editer').css('display','inline-block');
                }
                else
                {
                    $('#editer').css('right','')
                    $('#editer').css('left','-10%');
                    $('#editer').css('display','inline-block');
                }
                //alert(canvas.width)
            } 
            else 
            {
                //alert('no collision');
            }
        }, false);

    }
    }

    var startOffsetX, startOffsetY;

    function allowDrop(ev) {
    ev.preventDefault();
    }

    function mousedown(ev) {
    startOffsetX = ev.offsetX;
    startOffsetY = ev.offsetY;
    }

    function dragstart(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {

    ev.preventDefault();

    //var dropX = ev.clientX - canvasLeft - startOffsetX;
    //var dropY = ev.clientY - canvasTop - startOffsetY;

    var dropX = ev.offsetX - canvasLeft - startOffsetX;
    var dropY = ev.offsetY - canvasTop - startOffsetY;

    var id = ev.dataTransfer.getData("Text");
    var dropElement = document.getElementById(id);
    // draw the drag image at the drop coordinates

    if(design !=1)
    {
        var rect = collides(design, dropX, dropY);
    }
    else
    {
        var rect = collides(canvasDesign10, dropX, dropY);
    }


    if(dropElement != null)
    {
        if (dropY > rect.y && dropY < rect.y + rect.h && dropX > rect.x &&  dropX < rect.x + rect.w)
        {
            ctx.clearRect(rect.x, rect.y,rect.w,rect.h);
            ctx.drawImage(dropElement, rect.x, rect.y,rect.w,rect.h);
        }
        else
        {
            return false;
        }
    }
    else
        return false;
    }
    function cleareCanvas()
    {           
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

  [enter image description here][1]

i want like image arrow->

Answer 1

以下是一种方式：

为每张图片制作一个isHovering标记。
收听mousemove事件，
在mousemove处理程序中，点击测试每个图像。如果鼠标在图像上方，则设置它的标记，表示它正在盘旋。否则请清除图像标记。
清除画布并重绘所有图像。为悬停在其上的任何图像添加阴影。

示例代码和演示：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var isDown=false;
var startX,startY;

ctx.shadowBlur=5;
ctx.fillStyle='skyblue';

var images=[{x:25,y:25,isHovering:false},{x:100,y:25,isHovering:false},{x:175,y:25,isHovering:false}];
draw();
$("#canvas").mousemove(function(e){handleMouseMove(e);});

function draw(){
  ctx.clearRect(0,0,cw,ch);
  for(var i=0;i<images.length;i++){
    var img=images[i];
    ctx.shadowColor=img.isHovering?'rgba(0,0,0,1)':'rgba(0,0,0,0)';
    ctx.fillRect(img.x,img.y,35,25);
  }
}


function handleMouseMove(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  for(var i=0;i<images.length;i++){
    var img=images[i];
    var x=img.x;
    var y=img.y;
    img.isHovering=(mx>x && mx<x+35 && my>y && my<y+25);
  }
  draw();

}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hover over shapes</h4>
<canvas id="canvas" width=300 height=100></canvas>

＆＃13;

如何在悬停时在canvas元素中制作阴影效果

1 个答案: