網格縮放 - html5畫布轉換不起作用

我對編碼非常陌生。我的項目是放大基於100px正方形的畫布圖像。當我在網格中移動時，我的選擇器正方形正在圖像周圍移動，並刪除了舊的正方形。網格縮放 - html5畫布轉換不起作用

這裏是我的代碼：

HTML

<!doctype HTML> 
<html lang="en"> 
<head> 
<script src="draw.js"></script> 
</head> 
<body> 
<section id="main"> 
<canvas id="canvas" width="400" height="600" style='border:3px solid red'> 
</canvas> 
</section> 
</body>

JAVASCRIPT

function doFirst(){ 
    var x = document.getElementById('canvas') 
    canvas=x.getContext('2d'); 
    canvas.strokeStyle = "blue"; 
    var pic= new Image(); 
    pic.src = "tut.jpg"; 
    pic.addEventListener ("load",function(){canvas.drawImage(pic,0,0)},false); 

    } 

    function select(e){ 
    var xPos=e.clientX; 
    var yPos=e.clientY; 

    var locationX = Math.floor(xPos/100)*100 
    var locationY = Math.floor(yPos/100)*100 
    var pic= new Image(); 
    pic.src = "tut.jpg"; 
    canvas.drawImage(pic,0,0); 
    canvas.strokeRect(locationX,locationY,100,100); 
    } 

    function zoom (e) { 
    var locationX = Math.floor(xPos/100)*100 
    var locationY = Math.floor(yPos/100)*100 

    canvas.translate(-locationX,-locationY); 
    canvas.scale(5,5); 
    } 


    window.addEventListener ("load", doFirst, false); 
    window.addEventListener ("mousemove", select, false); 
    window.addEventListener("mousedown",zoom,false);

變焦功能不踢在所有。我不確定如何從下一個功能繼續前進 - 一個簡單的着色應用程序 - =而不是一旦有選擇功能 - 訂單功能仍然有點神祕。請原諒，因爲我可能在這段代碼中做了一些巨大的敲詐者。

所有幫助非常感謝，

尼克

來源

2013-11-22 user3021347

解答有關zoom()你的問題：

變量在JavaScript下的功能範圍操作。也就是說，在函數中聲明的任何變量只對該函數內部的任何變量保持可見。

當您嘗試在zoom()使用xPos和yPos，你會得到undefined值他們，因爲xPos和yPos只內select()聲明。

xPos和yPos也需要在zoom()中聲明和計算。

來源

2013-11-23 04:46:05

當然！謝謝。放大功能似乎比我想象的要難一些：比例尺似乎會將偏移量拋出。

另外我的動畫廣場刷新不同的Chrome和IE瀏覽器。多麼奇怪。在IE上平滑但在Chrome上閃爍。

有沒有一個很好的地方可以閱讀有關創建函數事件序列的內容，或者我只是將一個函數放在另一個函數內？

非常感謝您的幫助，

尼克

來源

2013-11-24 16:42:46 user3021347

網格縮放 - html5畫布轉換不起作用

回答

相關問題