个人中心
gpt4 book ai didi

javascript - HTML5 中的 Canvas 大小

转载 作者：太空宇宙 更新时间：2023-11-04 04:06:07 26 4
gpt4 key购买 nike

我的元素中有这段代码，链接如下:http://jsfiddle.net/89wgk/

这是我的代码:

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

当我将鼠标放在 flex 的矩形中时，阴影开始出现，但我希望当我将鼠标放在芦苇(矩形)上而不是在 canvas 内时发生这种情况。

我想知道当我将鼠标移到矩形上时如何运行阴影？

最佳答案

下面是我的做法:

  • 创建一个绘制弧形的函数，因为它必须经常重绘
  • 监听 Canvas 上的 mouseMove 事件
  • 使用 context.isPointInside(mouseX,mouseY) 测试鼠标是否在圆弧内
  • 根据鼠标是否在圆弧内重绘带/不带阴影的圆弧

玩得开心!

这是代码和 fiddle :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/

26 4 0
文章推荐： c - 我如何在另一个函数中调用显示回调函数，以便我的定时器函数也可以执行？
文章推荐： linux - 在 Unix Bash 脚本中的 if/fi 语句中定义变量
文章推荐： python - BeautifulSoup 返回充满变量的 HTML
文章推荐： c - Freetype Opengl Glyph 未呈现
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com