例子var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.strokeRect(5,5,25,15);ctx.scale(2,2);ctx.strokeRect(5,5,25,15);問題來了 scale(sx,sy)sx和sy是像素px嗎還是相對比例？這會改變畫布的位置還是改變畫筆的位置？這個方法會移動整個畫布的起始點嗎？
1 回答
慕俠2389804
TA貢獻1719條經驗 獲得超6個贊
sx和sy是個比例數字，比如設置scale(2,2)，是在x方向和y方向都放大了兩倍，出來的效果就是圖像的縮放。畫布的位置并沒有改變。
你這樣理解，scale是把坐標改變了相應的比例。還是以scale(2,2)為例。為了顯示明顯，給段css,
| 1234 | var ctx=drawing.getContext("2d"); ctx.strokeRect(20,20,20,20); ctx.scale(2,2); ctx.strokeRect(20,20,20,20); |
效果如下：
scale(2,2)后，坐標變成了原來的兩倍，所以同樣的坐標圖像的大小變成了之前的兩倍。看坐標，起點同樣是(20,20)，但是變換以后變成了右下角，就是（40,40），很明顯，是坐標尺度變了，一格變成了之前的兩格，所以同樣的起點也變成了（40,40）。
如果想要變換起點位置的話，就用translate方法移動原點就行了，比如起點要求不變，就這樣：
| 12345 | var ctx=drawing.getContext("2d"); ctx.strokeRect(20,20,20,20); ctx.translate(-20,-20); ctx.scale(2,2); ctx.strokeRect(20,20,20,20); |
效果如下：
按要求來就行了。
希望可以幫到你~~~~~
添加回答
舉報
0/150
提交
取消