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