<!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的中心，但是現(xiàn)在明顯沒有居中。類似百度地圖那樣，點擊了的地方就會居中
大神來看看canvas吧
西蘭花偉大炮
2017-03-04 18:06:29
