大神来看看canvas吧

<!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的中心，但是现在明显没有居中。类似百度地图那样，点击了的地方就会居中

西兰花伟大炮

浏览 1090回答 1

1回答

心有猛虎_细嗅蔷薇

哈哈我也解决不了不如你联系联系波波老师,看他能不能给你个回复~~ 祝君好运

0 0

随时随地看视频慕课网APP