                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

關(guān)于translate是否移動(dòng)坐標(biāo)軸，視頻5分14說經(jīng)過translate位移后坐標(biāo)還是（0，0），但是W3C上不是這么定義的啊

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

在位置 (10,10) 處繪制一個(gè)矩形，將新的 (0,0) 位置設(shè)置為 (70,70)。再次繪制新的矩形（請(qǐng)注意現(xiàn)在矩形從位置 (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的定義，按這樣一來，左上角坐標(biāo)就應(yīng)該是（0+x,0+y），再用scale縮放，對(duì)于坐標(biāo)應(yīng)該有影響的，只不過在這個(gè)案例的canvas里面看出不來，除非能打印出canvas的坐標(biāo)。。

究竟是老師說的對(duì)還是W3C的對(duì)，還是我理解錯(cuò)了？？

Qzhor

2016-08-26

源自：Canvas繪圖詳解 4-3

關(guān)注問題我要回答

1389

操作

收起

3 回答

慕標(biāo)7139032
2017-11-23

感覺應(yīng)該還是有影響的

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

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

W3C和老師說的一樣呀。

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

<!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>