                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /Canvas繪圖詳解

關于translate是否移動坐標軸，視頻5分14說經過translate位移后坐標還是（0，0），但是W3C上不是這么定義的啊

http://www.w3school.com.cn/tags/canvas_translate.asp

在位置 (10,10) 處繪制一個矩形，將新的 (0,0) 位置設置為 (70,70)。再次繪制新的矩形（請注意現在矩形從位置 (80,80) 開始繪制）：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

這是W3C的定義，按這樣一來，左上角坐標就應該是（0+x,0+y），再用scale縮放，對于坐標應該有影響的，只不過在這個案例的canvas里面看出不來，除非能打印出canvas的坐標。。

究竟是老師說的對還是W3C的對，還是我理解錯了？？

Qzhor

2016-08-26

源自：Canvas繪圖詳解 4-3

關注問題我要回答

1379

操作

收起

3 回答

慕標7139032
2017-11-23

感覺應該還是有影響的

0 回復有任何疑惑可以回復我~

收起回答

魚字頭上一把刀
2016-10-17

W3C和老師說的一樣呀。

把上面的稍微改一下，改成 ↓↓ 這樣運行下，直觀很多~

<!DOCTYPE?html>
<html>
<body>

<canvas?id="myCanvas"?width="300"?height="150"?style="border:1px?solid?#d3d3d3;">
Your?browser?does?not?support?the?HTML5?canvas?tag.
</canvas>

<script>

var?c=document.getElementById("myCanvas");
var?ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(110,60);
ctx.fillRect(0,0,100,50);

</script>

</body>
</html>