初識HTML5 2 繪畫的原理

2021-06-28 16:41:02 字數 634 閱讀 5416

在《畫布》一文中,我們已經初步認識了html5 的canvas, 今天我們就要來聊聊如何畫畫了。在畫畫之前,我們必須要先認識乙個東東:the coordinate system 座標系統:如下圖所示:

相信大家還記得我們之前提到過繪畫平面的預設大小是300px*150px嗎?恩,相信大家對座標軸不會陌生,這裡大家要注意,座標的位置不會固定,因為你可以通過translate, rotate, scale,  

custom transformations 來改變畫布內座標的位置。這個暫且不表。那麼html5到底是怎麼來畫圖形的呢?確切來說,瀏覽器執行的順序是什麼呢?

1.  根據目前的繪畫引數,在乙個無限大的,透明的點陣圖上畫圖形。

2.  根據目前陰影引數,在第二個點陣圖上畫陰影。

3.  計算陰影和畫布全域性的alpha通道。

4.  將陰影合成到畫布的實際選區。

5.  計算影象和畫布全域性的alpha通道。

6.  將影象合成到畫布的實際選區。

(2-4只有在有陰影的情況下被執行)

可能大家不是很理解其中的原理,不要急,我們後面一起畫點東東你就知道了~

HTML5 2 列表 結構標記 表單

2 結構標記 3 表單 3.2 元素 3.3 其他控制項 4 h5新表單元素 預設按照從上到下的順序顯示資料,可以在資料前新增標識 使用列表布局 去掉標識 列表是將具有相似特徵或者具有先後順序的幾行文字進行對齊排列 所有列表都由列表型別和列表項組成 列表型別 有序列表order list 和無序列表...

初識HTML及常用的標籤(1)

我們所學的html 英文hyper text markup language的縮寫 是一門超文字標記語言。所謂的超文字,就是在頁面中不僅僅可以加入文字,還可以有 鏈結 聲音 動畫 多 等內容。它可以從乙個檔案跳到另乙個檔案,可以與全世界各地主機的檔案連線。html作用就是用標記標籤來描述網頁,把網頁...

初識HTML,及對HTML的一些基礎知識的總結

今天本來打算學習php的,在看了網上有關的資料和學長們的建議後還是先學習html比較好,於是今天決定總結一下關於html的一些基礎知識 首先對html的初始介面的乙個例項介紹 doctype html utf 8 title head h1 p body html 以下將對 中的各個元素進行解析 僅...