資訊專欄INFORMATION COLUMN
摘要：首先看紅色框中的第一行代碼，執(zhí)行后坐標(biāo)系是這樣的第二行代碼旋轉(zhuǎn)后是這樣的注意看此時(shí)軸和軸已經(jīng)改變，以及正方向的方向。
首先，當(dāng)我們?cè)陧?yè)面上初始化canvas時(shí)，相當(dāng)于在上面放了一塊畫(huà)布，這塊畫(huà)布我們可以理解為上面有一個(gè)坐標(biāo)系(如下圖)，左上角是原點(diǎn)，往右是X軸的正方向，往下是Y軸的正方向，我們?cè)诋?huà)布上繪制的內(nèi)容都是基于這個(gè)坐標(biāo)系完成，但是有時(shí)候我們需要對(duì)繪制的內(nèi)容進(jìn)行調(diào)整，例如將上面的一個(gè)圖形旋轉(zhuǎn)某個(gè)角度，或者在畫(huà)布正中心畫(huà)一個(gè)圖形，我們就可以通過(guò)translate和rotate將坐標(biāo)系進(jìn)行移動(dòng)之后再進(jìn)行繪制.
還有，rotate的旋轉(zhuǎn)是以原點(diǎn)為基準(zhǔn)進(jìn)行旋轉(zhuǎn)，，這一點(diǎn)很重要
| 函數(shù) | 參數(shù) | 描述 |
|---|---|---|
| translate | dx,dx | 將坐標(biāo)系在X軸和Y軸移動(dòng)的距離 |
| rotate | angle | 坐標(biāo)系旋轉(zhuǎn)的角度，順時(shí)針為正,，逆時(shí)針為負(fù) |
| save | 保存當(dāng)前坐標(biāo)系的狀態(tài) | |
| restore | 恢復(fù)上一次坐標(biāo)系狀態(tài) |
當(dāng)我們不對(duì)畫(huà)布進(jìn)行旋轉(zhuǎn)和移動(dòng)的時(shí)候，在上面繪制一個(gè)矩形，是這樣子的
可以看到此時(shí)是基于左上角進(jìn)行繪制的，如果我們用translate將它向右和向下移動(dòng)200px和100px呢
可以看到，畫(huà)布位置沒(méi)有改變，我們移動(dòng)的只是坐標(biāo)系，如果我們繼續(xù)在上面繪制圖形，仍然是以現(xiàn)在這個(gè)位置的坐標(biāo)系為準(zhǔn)，如果我們只想在這個(gè)位置畫(huà)一次之后就恢復(fù)坐標(biāo)系原始位置，我們應(yīng)該在移動(dòng)之前調(diào)用save()保存狀態(tài)，繪制后調(diào)用restore()恢復(fù).
如果我們想將最開(kāi)始的矩形以自身中心旋轉(zhuǎn)90°呢，想看代碼和效果圖
emmmm...沒(méi)有計(jì)算好，導(dǎo)致有點(diǎn)跑偏，但是它還是以自己為中心轉(zhuǎn)了90°，但是沒(méi)事，不影響理解rorate和translate這兩個(gè)函數(shù)配合的理解。
首先看紅色框中的第一行代碼，執(zhí)行后坐標(biāo)系是這樣的
第二行代碼旋轉(zhuǎn)后是這樣的
注意看此時(shí)X軸和Y軸已經(jīng)改變，以及正方向的方向。第三行代碼執(zhí)行后如下
為什么會(huì)往右上方跑呢？因?yàn)槲覀僼ranslate中的參數(shù)是負(fù)數(shù)，而此時(shí)坐標(biāo)軸的正值方向是左邊和下邊，所以是往右邊和上邊跑
為什么原點(diǎn)會(huì)跑出畫(huà)布之外？因?yàn)閄軸移動(dòng)的距離是width/2，而豎直方向空間不足，就繼續(xù)往上走了。
通過(guò)坐標(biāo)系來(lái)說(shuō)明這兩個(gè)函數(shù)主要是因?yàn)樽罱龅囊粋€(gè)項(xiàng)目中需要將畫(huà)布上面繪制的圖片以圖片自身為中心旋轉(zhuǎn)90°或者180°，而看了許多博客后比較少通過(guò)坐標(biāo)系來(lái)講解這兩個(gè)函數(shù)，嘗試了很久之后發(fā)現(xiàn)通過(guò)坐標(biāo)系來(lái)理解雖然麻煩，但是感覺(jué)簡(jiǎn)單點(diǎn)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54521.html
摘要：首先看紅色框中的第一行代碼，執(zhí)行后坐標(biāo)系是這樣的第二行代碼旋轉(zhuǎn)后是這樣的注意看此時(shí)軸和軸已經(jīng)改變，以及正方向的方向。 首先，當(dāng)我們?cè)陧?yè)面上初始化canvas時(shí)，相當(dāng)于在上面放了一塊畫(huà)布，這塊畫(huà)布我們可以理解為上面有一個(gè)坐標(biāo)系(如下圖)，左上角是原點(diǎn)，往右是X軸的正方向，往下是Y軸的正方向，我們?cè)诋?huà)布上繪制的內(nèi)容都是基于這個(gè)坐標(biāo)系完成，但是有時(shí)候我們需要對(duì)繪制的內(nèi)容進(jìn)行調(diào)整，例如將上面的...
摘要：但需要注意的是，需在使用前調(diào)用。當(dāng)然，你愿意的話也可以兩者結(jié)合著用。繪制圖像相信很多入門(mén)的，都看不到這個(gè)地方，不就是繪制圖像的嘛，啊不準(zhǔn)確，是繪制圖形的。明確的說(shuō)，是指圍繞原點(diǎn)圖像旋轉(zhuǎn)弧度。 前言 本文寫(xiě)在七月底，進(jìn)來(lái)不加班就整理了一下，一些非?；A(chǔ)的知識(shí)，對(duì)于canvas剛?cè)腴T(mén)的人來(lái)說(shuō)，值得閱讀一下。 來(lái)個(gè)氣勢(shì)如虹的開(kāi)頭 與看各種文章相比，我更喜歡數(shù)學(xué)里的邏輯；與學(xué)習(xí)各種日新月異的框...
摘要：比如弧線或圓形從到繪制一條以為圓心，為半徑的弧線，其中和用弧度表示，為時(shí)，順時(shí)針畫(huà)弧線，反之，逆時(shí)針畫(huà)弧線。 最近筆者在學(xué)習(xí)HTML5的新元素，會(huì)分享一些基礎(chǔ)知識(shí)以及小例子，最終使用實(shí)現(xiàn)一個(gè)繪制簡(jiǎn)單圖表（條形圖、線圖或者餅圖）的js庫(kù)，會(huì)更新一到兩篇文章~下面我們開(kāi)始吧~ 確認(rèn)寬度和高度 我們首先應(yīng)該指定標(biāo)簽即畫(huà)布的寬度和高度屬性，并在開(kāi)始和閉合標(biāo)簽之間添加后備信息： ...
閱讀 2126·2021-11-24 10:28
閱讀 1150·2021-10-12 10:12
閱讀 3359·2021-09-22 15:21
閱讀 698·2021-08-30 09:44
閱讀 1914·2021-07-23 11:20
閱讀 1159·2019-08-30 15:56
閱讀 1774·2019-08-30 15:44
閱讀 1495·2019-08-30 13:55
