HTML canvas中translate()與rotate()的理解

FreeZinG 發布于2019-08-22 15:42 / 1170人閱讀

摘要：首先看紅色框中的第一行代碼，執行后坐標系是這樣的第二行代碼旋轉后是這樣的注意看此時軸和軸已經改變，以及正方向的方向。

首先，當我們在頁面上初始化canvas時，相當于在上面放了一塊畫布，這塊畫布我們可以理解為上面有一個坐標系(如下圖)，左上角是原點，往右是X軸的正方向，往下是Y軸的正方向，我們在畫布上繪制的內容都是基于這個坐標系完成，但是有時候我們需要對繪制的內容進行調整，例如將上面的一個圖形旋轉某個角度，或者在畫布正中心畫一個圖形，我們就可以通過translate和rotate將坐標系進行移動之后再進行繪制.

還有，rotate的旋轉是以原點為基準進行旋轉，，這一點很重要

功能與參數介紹

函數	參數	描述
translate	dx,dx	將坐標系在X軸和Y軸移動的距離
rotate	angle	坐標系旋轉的角度，順時針為正,，逆時針為負
save		保存當前坐標系的狀態
restore		恢復上一次坐標系狀態

當我們不對畫布進行旋轉和移動的時候，在上面繪制一個矩形，是這樣子的

可以看到此時是基于左上角進行繪制的，如果我們用translate將它向右和向下移動200px和100px呢

可以看到，畫布位置沒有改變，我們移動的只是坐標系，如果我們繼續在上面繪制圖形，仍然是以現在這個位置的坐標系為準，如果我們只想在這個位置畫一次之后就恢復坐標系原始位置，我們應該在移動之前調用save()保存狀態，繪制后調用restore()恢復.

如果我們想將最開始的矩形以自身中心旋轉90°呢，想看代碼和效果圖

emmmm...沒有計算好，導致有點跑偏，但是它還是以自己為中心轉了90°，但是沒事，不影響理解rorate和translate這兩個函數配合的理解。
首先看紅色框中的第一行代碼，執行后坐標系是這樣的

第二行代碼旋轉后是這樣的

注意看此時X軸和Y軸已經改變，以及正方向的方向。第三行代碼執行后如下

為什么會往右上方跑呢？因為我們translate中的參數是負數，而此時坐標軸的正值方向是左邊和下邊，所以是往右邊和上邊跑

為什么原點會跑出畫布之外？因為X軸移動的距離是width/2，而豎直方向空間不足，就繼續往上走了。

通過坐標系來說明這兩個函數主要是因為最近做的一個項目中需要將畫布上面繪制的圖片以圖片自身為中心旋轉90°或者180°，而看了許多博客后比較少通過坐標系來講解這兩個函數，嘗試了很久之后發現通過坐標系來理解雖然麻煩，但是感覺簡單點。

云服務器 GPU云服務器 html5的canvas 你理解的html 你理解中的云服務器ecs是什么 js與html中變量

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93673.html

HTML canvas中translate()與rotate()的理解

摘要：首先看紅色框中的第一行代碼，執行后坐標系是這樣的第二行代碼旋轉后是這樣的注意看此時軸和軸已經改變，以及正方向的方向。首先，當我們在頁面上初始化canvas時，相當于在上面放了一塊畫布，這塊畫布我們可以理解為上面有一個坐標系(如下圖)，左上角是原點，往右是X軸的正方向，往下是Y軸的正方向，我們在畫布上繪制的內容都是基于這個坐標系完成，但是有時候我們需要對繪制的內容進行調整，例如將上面的...

GitCafe 2019-08-02 16:01 評論0 收藏0
canvas入門里，你沒注意到的那些知識

摘要：但需要注意的是，需在使用前調用。當然，你愿意的話也可以兩者結合著用。繪制圖像相信很多入門的，都看不到這個地方，不就是繪制圖像的嘛，啊不準確，是繪制圖形的。明確的說，是指圍繞原點圖像旋轉弧度。前言本文寫在七月底，進來不加班就整理了一下，一些非常基礎的知識，對于canvas剛入門的人來說，值得閱讀一下。來個氣勢如虹的開頭與看各種文章相比，我更喜歡數學里的邏輯；與學習各種日新月異的框...

tuniutech 2019-08-22 11:22 評論0 收藏0
HTML5 Canvas（基礎知識）

摘要：比如弧線或圓形從到繪制一條以為圓心，為半徑的弧線，其中和用弧度表示，為時，順時針畫弧線，反之，逆時針畫弧線。最近筆者在學習HTML5的新元素，會分享一些基礎知識以及小例子，最終使用實現一個繪制簡單圖表（條形圖、線圖或者餅圖）的js庫，會更新一到兩篇文章~下面我們開始吧~ 確認寬度和高度我們首先應該指定標簽即畫布的寬度和高度屬性，并在開始和閉合標簽之間添加后備信息： ...

YanceyOfficial 2019-08-22 16:58 評論0 收藏0