真实鼠标在画布中的位置

我试着用鼠标在HTML 5画布上画画，但是如果画布处于0，0(左上角)的位置，如果我更改画布位置，它就不会像它应该的那样绘制。这是我的密码。

 function createImageOnCanvas(imageId){
    document.getElementById("imgCanvas").style.display = "block";
    document.getElementById("images").style.overflowY= "hidden";
    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    var img = new Image(300,300);
    img.src = document.getElementById(imageId).src;
    context.drawImage(img, (0),(0));}function draw(e){
    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    posx = e.clientX;
    posy = e.clientY;
    context.fillStyle = "#000000";
    context.fillRect (posx, posy, 4, 4);}

HTML部分

 <body>
 <div id="images">
 </div>
 <canvas onmousemove="draw(event)" style="margin:0;padding:0;" id="imgCanvas"
          class="canvasView" width="250" height="250"></canvas>

我读过在JavaScript中创建一个简单的函数以获得正确位置的方法，但我不知道如何做。

繁花不似锦

浏览 679回答 3

3回答

随时随地看视频慕课网APP