HTML5學習，常用常記（canvas，SVG）

2021-09-12 02:51:11 字數 1068 閱讀 3732

您的瀏覽器不支援 html5 canvas 標籤。
座標：左上角為（0，0）；

您的瀏覽器不支援 html5 canvas 標籤。


您的瀏覽器不支援 html5 canvas 標籤。
使用 canvas 繪製文字，重要的屬性和方法如下：

您的瀏覽器不支援 html5 canvas 標籤。
漸變可以填充在矩形, 圓形, 線條, 文字等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設定canvas漸變：

當我們使用漸變物件，必須使用兩種或兩種以上的停止顏色。

addcolorstop()方法指定顏色停止，引數使用座標來描述，可以是0至1.

使用漸變，設定fillstyle或strokestyle的值為 漸變，然後繪製形狀，如矩形，文字，或一條線。

您的瀏覽器不支援 html5 canvas 標籤。
建立漸變軸：createlineargradient(x,y,x1,y1),x,y指定漸變起點，本例中x=0,y=0以座標軸(0,0)點開始作為漸變起點，x1,y1指定漸變終點(200,0)，createlineargradient，定義線性漸變，以起點到終點連線，作為漸變軸，本裡是以(0,0)–>(200,0)即橫向漸變

您的瀏覽器不支援 html5 canvas 標籤。


image to use:


您的瀏覽器不支援 html5 canvas 標籤。
canvas參考手冊；

學習 html5 canvas 這一篇文章就夠了；

與其他影象格式相比（比如 jpeg 和 gif），使用 svg 的優勢在於：

下表列出了 canvas 與 svg 之間的一些不同之處。

canvas

svg

5 學習html5筆記

background red url i.png no repeat center 0 background attachment 當元素大小小於背靜，只顯示一部分，應用精靈圖 邊框 border border width 2px 3px 4px 1px border style border to...

HTML5筆記 （常用元素）

根元素，允許省略 允許省略 標題引入樣式定義 段落換行 水平線換行與不換行的節加粗斜體強調小 上標下標 a scheme 一般是http host 在http中預設為www a slef,blank,top,parent 代表用本視窗，新視窗，頂級框架，父級框架開啟 a media 指定href才有...

3 學習html5筆記

audio html5 標籤和video類似，沒有poster width height屬性 details詳情概要標籤 progress標籤進度 marquee 標籤 不在w3c標準 沒有語義，只是樣式，廢棄的標籤 有語義新增標籤 修改樣式使用css優於標籤屬性設定，方便改變需求，減少屬性的記憶。...