<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border: 3px solid #eeeeee; margin: 20px auto; display: block ">
</canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "img/1.jpg";
canvas.height = 600;
canvas.width = 1000;
image.onload = function () {
point = {x:500,y:300};
drawimgByScale(point);
function windowToCanvas(x,y){
var bbox = canvas.getBoundingClientRect();
return{x:x-bbox.left,y:y-bbox.top};
}
canvas.onclick = function (e) {
e.preventDefault();
var point = windowToCanvas(e.clientX, e.clientY);
drawimgByScale(point);
console.log(point.x,point.y);
};
};
function drawimgByScale(point){
//图片被拉伸后的宽高
var canvasimgwidth = image.width;
var canvasimgheight = image.height;
if(point.x > canvas.width/2){
var dx = canvas.width - canvasimgwidth/2 - point.x ;
}else{
var dx = canvas.width/2 - canvasimgwidth/2 + (canvas.width/2 - point.x);
}
if(point.y > canvas.height/2){
var dy = canvas.height - canvasimgheight/2 - point.y;
}else{
var dy = canvas.height/2 - canvasimgheight/2 + (canvas.height/2 - point.y);
}
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(image,dx,dy,canvasimgwidth,canvasimgheight);
}
</script>
</html>图片是比CANVAS的宽高大的，我想点击的时候，被点击的位置来到canvas的中心，但是现在明显没有居中。类似百度地图那样，点击了的地方就会居中
心有猛虎_细嗅蔷薇
相关分类