画在画布上，鼠标单击关闭

我的<canvas>元素占用100vw和100vh。我希望能够点击它的任何地方并在那里画一张照片。现在，当我点击屏幕时，图像不会在我点击的位置附近绘制。我点击左上角越近，就越接近。但是，如果我稍微偏离角落，图像会被推得很低，并且向右移动。画在画布上，鼠标单击关闭

如何计算我似乎需要的偏移量，以便让图像完全按照我点击的位置绘制？

//var count1 = (Math.floor(Math.random() * screen.width)) + 1; 
 
//var count2 = (Math.floor(Math.random() * screen.height)) + 1; 
 

 
function onCanvasClick() { 
 
    var image = document.getElementById("image"); 
 
    var xLoc = event.clientX; 
 
    var yLoc = event.clientY; 
 
    var loc = "xLoc is: " + xLoc + " | yLoc is: " + yLoc; 
 
    console.log(loc); 
 
    var c = document.getElementById("myCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    ctx.drawImage(image, xLoc, yLoc); 
 
}

#myCanvas { 
 
    width: 99vw; 
 
    height: 99vh; 
 
    border: 2px solid rgba(255, 255, 255, 0.5); 
 
    background-color: rgba(58, 154, 221, 0.3); 
 
} 
 

 
#image { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: none; 
 
}

<canvas id="myCanvas" onmousedown="onCanvasClick()">You dont support this!</canvas> 
 
<img id="image" src="//lorempixel.com/100/100/abstract/5/"></img>

来源

2017-10-18 skyleguy

调整大小与CSS画布延伸它的内容，类似于如何的<img>的行为。
拉伸偏移相对于鼠标点击的画布坐标。
例如，在坐标（5,5）处的点击可以转化为（15,25）的拉伸的画布坐标。

Sizing the canvas
画布的显示尺寸可以通过使用样式表被改变。在渲染过程中缩放图像以适应样式的尺寸。如果渲染看起来失真，请尝试在属性中明确指定宽度和高度属性，并且不要使用CSS。

您可以通过JavaScript设置画布尺寸以使其填充视口。

var image = document.getElementById("image"); 
 
var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 

 
c.width = window.innerWidth; 
 
c.height = window.innerHeight; 
 

 
function onCanvasClick() { 
 
    var xLoc = event.clientX; 
 
    var yLoc = event.clientY; 
 
    ctx.drawImage(image, xLoc, yLoc); 
 
}

body { 
 
    margin: 0; 
 
} 
 
#myCanvas { 
 
    display: block; 
 
    background-color: rgba(58, 154, 221, 0.3); 
 
} 
 
#image { 
 
    display: none; 
 
}

<canvas id="myCanvas" onmousedown="onCanvasClick()" width="100%" height="100%">You dont support this!</canvas> 
 
<img id="image" src="//lorempixel.com/50/50/abstract/5/"></img>

大小调整将清除画布，所以响应式设计将需要额外的functionalit年。
Matthew Crumley has ideas用于在调整大小时重新绘制/缩放现有内容。

来源

2017-10-18 21:21:58 showdev

这绝对听起来像它可以工作。没想到这是我伸展画布的原因。当我明天早上回到我的笔记本电脑时，我会检查它是否有效，如果确实如此，请给予该复选标记。谢谢！ – skyleguy

画在画布上，鼠标单击关闭

回答

相关问题