如何使用一個轉換會影響上下文中的多個事件

我想在具有不同轉換的畫布上繪製多個事物。我將a.scale（）僅用於berzierCurveTo（）部分，但縮放轉換也會影響底部的arc（）。我已經嘗試過closePath（）和重置比例（1,1），但它什麼都不會做。我該怎麼辦？如何使用一個轉換會影響上下文中的多個事件

var c = document.getElementsByTagName('canvas')[0]; 
var a = c.getContext('2d'); 

c.width = 500; 
c.height= 550; 
//Shape 1 with some transformations 

a.scale(0.8,0.8); //How come a.scake affects the shape 2 as well? 
a.beginPath(); 
a.moveTo(143, 59); 
a.bezierCurveTo(151, 51, 195, 7, 272, 22); 
a.stroke(); 
a.closePath(); //closePath doesn't do anything to stop scaling the shape 2 

//Shape 2 
a.beginPath(); 
a.arc(250, 400, 100, 0,6.3, false); 
a.stroke();

This is what the image looks like

來源

2013-02-11 seedasharp

你想縮放的shape2在shape1做了什麼？ – 2013-02-11 05:29:07

不，但我想要不同類型的轉換，我不想在形狀2上同樣縮放 – Jason 2013-02-11 05:35:20

您可以在形狀2上使用'scale'，比如'a.scale（2,2）; a.beginPath（）; a.arc （250，400，100，0,6.3，false）; a.stroke（）;' – 2013-02-11 05:41:37

您可以保存畫布狀態縮放前和形狀1後恢復：

a.save(); 

a.scale(0.8, 0.8); 
a.beginPath(); 
a.moveTo(143, 59); 
a.bezierCurveTo(151, 51, 195, 7, 272, 22); 
a.stroke(); 
a.closePath(); 

a.restore();

http://jsfiddle.net/uq5mR/

來源

2013-02-11 05:25:54 dmk

如何使用一個轉換會影響上下文中的多個事件

回答

相關問題