如何在光标所在的位置绘制线条?HTML5画布使用MrDoob's和谐

How can I get the line to draw where the cursor is positioned? HTML5 canvas using MrDoob's Harmony

本文关键字：MrDoob 布使用 和谐 HTML5 光标 位置 绘制      更新时间：2024-06-25

问题

如何在光标所在的位置绘制线条？

详细信息

我正试着用杜布先生的和声脚本在html5画布上徒手画一条线(https://github.com/mshuler/harmony)。我对画布进行了编辑，使其具有特定的宽度和高度（在覆盖整个页面之前）。然后我使用以下CSS 定位它

canvas 
{
    position:absolute;
    top:0px; left:0px;
}

当我在画布上绘制（使用鼠标）时，线条会按照正常方式绘制，但如果我像一样定位画布

canvas 
{
    position:absolute;
    top:100px; left:0px;
}

该行显示为低于光标的位置。

问题：如何在光标所在的位置绘制线条

这是我的密码。

CSS

canvas 
{
    position:absolute;
    top:100px; left:0px;
}
#writepad
{
    display:block;
    width:700px;
    height:500px;
}

JAVASCRIPT（Main.js）

    SCREEN_HEIGHT = $('#writepad').innerHeight();// SCREEN_HEIGHT = window.innerHeight,
init();
function init()
{
    var hash, palette, embed, localStorageImage;
    document.body.style.backgroundRepeat = 'no-repeat';
    document.body.style.backgroundPosition = 'center center';   
    container = document.createElement('div'); 
    document.body.appendChild(container);
    canvas = document.createElement("canvas");
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
    canvas.style.cursor = 'crosshair';
    container.appendChild(canvas);
    context = canvas.getContext("2d");
    flattenCanvas = document.createElement("canvas");
    flattenCanvas.width = SCREEN_WIDTH;
    flattenCanvas.height = SCREEN_HEIGHT;   
}

// WINDOW
function onWindowMouseMove( event )
{
    mouseX = event.clientX;
    //console.log("mouseX=",mouseX);
    mouseY = event.clientY;
    //console.log("mouseY=",mouseY);
}
function onWindowResize()
{
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight; 
    menu.container.style.left = ((SCREEN_WIDTH - menu.container.offsetWidth) / 2) + 'px';   
    about.container.style.left = ((SCREEN_WIDTH - about.container.offsetWidth) / 2) + 'px';
    about.container.style.top = ((SCREEN_HEIGHT - about.container.offsetHeight) / 2) + 'px';
}
function onWindowBlur( event )
{
    shiftKeyIsDown = false;
    altKeyIsDown = false;
}
// CANVAS
function onCanvasMouseDown( event )
{
    var data, position;
    clearTimeout(saveTimeOut);
    cleanPopUps();
    if (altKeyIsDown)
    {
        flatten();      
        data = flattenCanvas.getContext("2d").getImageData(0, 0, flattenCanvas.width, flattenCanvas.height).data;
        position = (event.clientX + (event.clientY * canvas.width)) * 4;
        console.log("position=",position);      
        foregroundColorSelector.setColor( [ data[position], data[position + 1], data[position + 2] ] );     
        return;
    }
    BRUSH_PRESSURE = wacom && wacom.isWacom ? wacom.pressure : 1;   
    brush.strokeStart( event.clientX, event.clientY );
    window.addEventListener('mousemove', onCanvasMouseMove, false);
    window.addEventListener('mouseup', onCanvasMouseUp, false);
}
function onCanvasMouseMove( event )
{
    BRUSH_PRESSURE = wacom && wacom.isWacom ? wacom.pressure : 1;   
    brush.stroke( event.clientX, event.clientY );
}
function onCanvasMouseUp()
{
    brush.strokeEnd();  
    window.removeEventListener('mousemove', onCanvasMouseMove, false);
    window.removeEventListener('mouseup', onCanvasMouseUp, false);
}
function onCanvasTouchStart( event )
{
    cleanPopUps();      
    if(event.touches.length == 1)   {
        event.preventDefault();     
        brush.strokeStart( event.touches[0].pageX, event.touches[0].pageY );        
        window.addEventListener('touchmove', onCanvasTouchMove, false);
        window.addEventListener('touchend', onCanvasTouchEnd, false);
    }
}
function onCanvasTouchMove( event )
{
    if(event.touches.length == 1)
    {
        event.preventDefault();
        brush.stroke( event.touches[0].pageX, event.touches[0].pageY );
    }
}
function onCanvasTouchEnd( event )
{
    if(event.touches.length == 0)
    {
        event.preventDefault();     
        brush.strokeEnd();
        window.removeEventListener('touchmove', onCanvasTouchMove, false);
        window.removeEventListener('touchend', onCanvasTouchEnd, false);
    }
}
function flatten()
{
    var context = flattenCanvas.getContext("2d");   
    context.fillStyle = 'rgb(' + BACKGROUND_COLOR[0] + ', ' + BACKGROUND_COLOR[1] + ', ' + BACKGROUND_COLOR[2] + ')';
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.drawImage(canvas, 0, 0);
}

你想要这样的东西吗？？？

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
        window.onload=function() {
            var canvas=document.getElementById('mycanvas');
            var ctx=canvas.getContext('2d');            
                     canvas.addEventListener('mousemove',function onMouseover(e) {
                        var mx = e.clientX - 8;
                        var my = e.clientY - 8;                             
                        ctx.fillStyle = '#000'; 
                        ctx.font = 'bold 22px verdana';
                        ctx.fillText(".", mx, my,1000);                     
                    }, 0);                  
        };
        </script>
    </head>
    <body>
        <canvas id="mycanvas" height="400" width="800" style="border:1px solid #000000;">
    </body>
</html>

使用偏移属性

y = event.pageY - canvas.offsetTop;
x = event.pageX - canvas.offsetLeft;
相关文章：