时间戳

首页 > 解决方案 > 画布 onmouseover 添加不透明度正方形

javascript - 画布 onmouseover 添加不透明度正方形

问题描述

几天来，我一直在尝试在画布上的鼠标光标指针上添加一个正方形。

当我的鼠标移动时，我需要在不更改初始画布的情况下显示一个正方形（不透明度为 0.7）。

如果有人可以帮忙？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#d1defa";
ctx.fillRect(0, 0, c.width, c.height);
<html>
<body>

<canvas id="myCanvas" style="width:300px;height:300px;border:1px solid #000000;"></canvas>

</body>
</html>

标签： javascripthtmlcanvas

解决方案

最初的版本非常有问题，所以经过一番思考并研究使用 css 变量并发现这一点后，我修改了原始版本并得出以下似乎可以正常工作的版本（无论如何在 Google Chrome 中）：

<html>
    <head>
        <title>Position square over canvas at cursor position</title>
        <style>
            :root{
                /* set some initial values for the css variables */
                --width:50px;
                --px:0px;
                --py:0px;
                --bw:0px;
                --display:block;
                cursor:crosshair;
            }

            canvas{
                width:300px;
                height:300px;
                border:var(--bw) solid black;
                border-radius:0.5rem;
                display:inline-block;
                position:absolute;
                margin:10rem;
            }

            #overlay{
                position:absolute;
                left:var(--px);
                top:var(--py);

                width:var(--width);
                height:var(--width);
                display:var(--display);

                opacity:0.7;
                background-color:red;
                border:var(--bw) solid black;
                border-radius:0.5rem;
                cursor:crosshair;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded',()=>{

                let canvas=document.querySelector('canvas');
                let ctxt=canvas.getContext('2d');
                    ctxt.fillStyle = '#d1defa';
                    ctxt.fillRect( 0, 0, canvas.width, canvas.height );

                let bounds=canvas.getBoundingClientRect();

                const id='overlay';
                const width=50;
                const bw=2;


                /* modify initial values of css variables */
                let root=document.documentElement;
                    root.style.setProperty( '--width', width+'px' );
                    root.style.setProperty( '--px', bounds.left+'px' );
                    root.style.setProperty( '--py', bounds.top+'px' );
                    root.style.setProperty( '--bw', bw+'px' );

                let img=new Image();
                    img.onload=()=>{
                        ctxt.drawImage( img, 0, 0, canvas.width, canvas.height );
                    }
                    img.src='https://cdn.pixabay.com/photo/2013/07/12/16/38/pumpkin-151302_960_720.png';



                const createsquare=function(id){
                    let div=document.getElementById(id);
                    if( div ) return div;
                    else {
                        div=document.createElement('div');
                        div.id=id;
                        canvas.parentNode.appendChild( div );
                        return div;
                    }
                };


                /* create the overlay */
                createsquare( id );

                /* find the accurate position of the cursor */
                const mousemovehandler=function( event ){
                    let e=event || window.event;
                    let d=( e.target && e.target.ownerDocument ) || document;
                        d=d.documentElement;
                    let b=d.body;
                    e.pageX=e.clientX + ( d + d.scrollLeft || b && b.scrollLeft || 0 ) - ( d && d.clientLeft || b && b.clientLeft || 0 );
                    e.pageY=e.clientY + ( d && d.scrollTop || b && b.scrollTop || 0 ) - ( d && d.clientTop || b && b.clientTop || 0 );
                    return {
                        x:e.pageX,
                        y:e.pageY
                    };
                };

                /* listen for mouse events */
                root.addEventListener( 'mousemove',(e)=>{
                    let obj=mousemovehandler( e );
                    let px=obj.x - ( width / 2 ) - bw;
                    let py=obj.y - ( width / 2 ) - bw;
                    if( 
                        ( obj.x > bounds.left ) && ( obj.x - bw < bounds.right + bw )
                            &&
                        ( obj.y + bw > bounds.top + bw ) && ( obj.y - bw < bounds.bottom + bw )
                    ){
                        /* set the position of the overlay */
                        root.style.setProperty('--display', 'block');
                        root.style.setProperty('--px', px +'px');
                        root.style.setProperty('--py', py +'px');
                    } else {
                        /* hide the overlay */
                        root.style.setProperty('--display', 'none');
                    }
                });
            });
        </script>
    </head>
    <body>
        <canvas></canvas>
    </body>
</html>

推荐阅读