繪製HTML5畫布的特定區域

如果我的很多繪圖將位於較大畫布的特定區域內（在本例中爲中心），有沒有辦法只是說您正在工作在那個特定的「子畫布」中，而不是每次你想畫畫都必須增加/減少邊距？每次指定座標時，它都會讓我的代碼看起來更加複雜。繪製HTML5畫布的特定區域

2013-03-31 user1136342

願你可能想使用['畫布＃translate'（https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Transformations＃翻譯）或許？ – Alexander

亞歷克斯說什麼和亞歷山大試圖說什麼 - 使用context.translate（x，y）將您的新圖紙設置爲「sub-canvas」座標。請注意，在context.translate（100,100）之後，使用context.rect（0,0,50,50）繪製的矩形實際將在畫布上繪製100,100 - 非常簡單！ – markE

@markE我依靠畫布寬度和高度來知道在哪裏繪製，所以如果我使用translate，我仍然需要添加/減去邊距以獲得「sub-canvas」的寬度和高度，以便獲得我的繪圖座標。 – user1136342

您可以使用drawimage將一個離屏畫布繪製到另一個畫布的某個部分。

創建一個新的畫布對象，並繪製所有的東西。最後在某些座標處將畫布繪製到屏幕畫布上，並繪製drawimage。

來源

2013-03-31 23:29:56 headchant

您可以使用translate()更改座標原點。使用save()保存原始原點。然後，找到適合屏幕繪圖區域中心的原點，並致電translate(x, y)。做你的繪畫，然後用restore()讓你以前的原點回來。

jsFiddle。

來源

2013-03-31 23:35:48 alex

Kinetic.js，Canvas的流行庫允許您創建Group圖層。你可以指定x,y座標，這個Group的高度和寬度。您還可以在該組中添加形狀並繪製其他內容。

這裏的和例如：

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 200 
    }); 
    var shapesLayer = new Kinetic.Layer(); 

    /* 
    * create a group which will be used to combine 
    * multiple simple shapes. Transforming the group will 
    * transform all of the simple shapes together as 
    * one unit 
    */ 
    var group = new Kinetic.Group({ 
    x: 220, 
    y: 40, 
    rotationDeg: 20 
    }); 

    var colors = ['red', 'orange', 'yellow']; 

    for(var n = 0; n < 3; n++) { 
    // anonymous function to induce scope 
    (function() { 
     var i = n; 
     var box = new Kinetic.Rect({ 
     x: i * 30, 
     y: i * 18, 
     width: 100, 
     height: 50, 
     name: colors[i], 
     fill: colors[i], 
     stroke: 'black', 
     strokeWidth: 4 
     }); 

     group.add(box); 
    })(); 
    } 

    shapesLayer.add(group); 
    stage.add(shapesLayer);

Here's a tutorial on how to add Groups

來源

2013-03-31 23:35:50

繪製HTML5畫布的特定區域

回答

相關問題