javascript - HTML5中的 Canvas 大小

我的项目中有此代码，这里是链接：http://jsfiddle.net/89wgk/

这是我的代码：

<canvas id="myCanvas" width="188" height="200"></canvas>
     var rectWidth = 110;
     var rectHeight = 110;
     var rectX = 10;
     var rectY = 25;

当我将鼠标置于弯曲的矩形中时，会开始产生阴影，但是当我将鼠标置于芦苇（矩形）上而不是在canvas内时，我希望这种情况发生。

我想知道如何将阴影移动到矩形上吗？

最佳答案

这是我的方法：

创建一个绘制圆弧形状的函数，因为它必须经常重绘
在画布上侦听mouseMove事件
使用context.isPointInside（mouseX，mouseY）测试鼠标是否在弧内
根据鼠标是否在圆弧内重绘有/无阴影的圆弧

玩得开心！

这是代码和小提琴：http://jsfiddle.net/m1erickson/64BHx/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

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

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var w = 110;
    var h = 110;
    var x = 10;
    var y = 25;

    var isShadowed=false;

    context.strokeStyle="#FF2A2A";
    context.shadowBlur = 20;
    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;


    context.globalAlpha=.250;
    context.strokeRect(x,y,w,h);
    context.globalAlpha=1.00;

    function draw(){

        // clear the canvas
        context.clearRect(0,0,canvas.width,canvas.height);

        // save the context state
        context.save();

        // set/clear the shadow based on isShadowed
        context.shadowColor= isShadowed ? '#7FD4FF' : "#FFFFFF";

        // draw the arc shape
        context.beginPath();
        context.moveTo(x,y);
        context.quadraticCurveTo(x+w-2,y+2,x+w,y+h);
        context.lineTo(x+w-35,y+h);
        context.quadraticCurveTo(x+w-2-35,y+2+35,x,y+35);
        context.lineTo(x,y);
        context.fillStyle="red";
        context.fill();
        context.stroke();

        // restore the context state
        context.restore();
    }

    // testing: display if mouse is in/out of arc shape
    var $status=$("#status");

    // listen for mousemove events
    $("#canvas").mousemove(function(e){handleMouseMove(e);});

    // handle mousemove events
    function handleMouseMove(e){

        // we alone are using mousemove events
        e.preventDefault();

        // get current mouse X/Y
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);

        // hit test if mouse is inside the arc shape
        var isInside=context.isPointInPath(mouseX,mouseY);
        $status.text("Is mouse inside: "+isInside);

        // don't redraw unless needed
        if(isInside && isShadowed){return;}
        if(!isInside && !isShadowed){return;}

        // change the shadow and redraw
        isShadowed=isInside;
        draw();
    }


    // start by drawing the unshadowed arc
    draw();

}); // end $(function(){});
</script>

</head>

<body>
    <p id="status">Status</p><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

关于javascript - HTML5中的 Canvas 大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21352242/