學習總結之HTML5劍指前端（建議收藏，圖文並茂）

時間  2020-03-17
標籤 學習 總結 html5 html 前端 建議 收藏 圖文並茂 欄目 HTML5 简体版
原文   原文鏈接

前言

學習《HTML5與CSS3權威指南》這本書很不錯，學完以後我很有感觸，以爲web的世界開明瞭許多。這本書是須要有必定基礎的web前端開發工程師。javascript

這本書主要學習HTML5和css3，看看這本書的書名就知道了，首先學習HTML5中新增的語法與標記方法，新增的元素和api。css

讀者瞭解內容：html

除了HTML5還有css3須要學習，css3中有各類新增的樣式和屬性。前端

這本書也要感謝做者以及工做人員。html5

這本書還有實例，使用HTML5中新增結構元素來構建網頁，和使用HTML5+css3來構建web應用程序。java

從2010年開始HTML5地推出，受到了世界各大瀏覽器的熱烈支持，在業界很受歡迎。那麼你須要瞭解一下HTML5與以前版本的大體區別嗎，須要瞭解爲啥支持HTML5嗎，答案是不太須要也能工做。css3

可是如，一份前端你能敲出代碼，可是問題你懂得什麼是cookie嗎？也許你懂個大概，組長或者高管問你什麼是cookie？有時候大部分人都是一頭暈，不過，百度查一下就能知道答案。程序員

其實須要瞭解一下的，關於HTML5web

HTML5的出現就連微軟也爲此下一代的ie9作了標準上的改進，就是爲了可以支持html5。canvas

HTML4的代碼示例：

示例代碼：

<form>
<p><label>用戶名：<input name="search" type="text" id="search"></label></p>
<script type="text/javascript">
 document.getElementById("search").focus();
</script>
</form>
複製代碼

HTML5的示例：

<form>
<p><label>Search:<input name="search" autofocus></label></p>
</form>
<div id="header">...</div>
<div id="nav">...</div>
<div class="arcticle">...</div>
<div id="side-bar">...</div>
<div id="footer">...</div>
複製代碼

HTML5的目的

HTML5的出現就是爲了可以創建更簡單的web程序，讓程序員編寫更簡單的HTML代碼，HTML5提供了不少api，新的屬性，新的元素等等，這樣HTML5就有理由成爲受歡迎的了。

在HTML5中代替Cookie的sessionStorage功能與globalStorage功能在ie8裏得到了支持。

一個新版本的出現，不少人都會有疑問，擔憂它會不會產生錯誤等。不過呢？它仍是有它火的理由。

  1. 兼容性
  2. 實用性
  3. 非革命性的發展

HTML5的出現解決了各類問題，這是一次比較強大的版本。

contentEditable屬性，designMode屬性，hidden屬性，spellcheck屬性，tabindex屬性。

HTML5

內容類型ContentType仍是text/html

DOCTYPE聲明，在HTML5中的DOCTYPE聲明方法以下，不區分大小寫：<!DOCTYPE html>

指定字符編碼，HTML5：<meta charset="UTF-8">

<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">

代碼示例：

checkbox checkbox1 checkbox2 checkbox3

代碼：

<input type="checkbox" checkbox>checkbox
<input type="checkbox">checkbox1
<input type="checkbox" checked="checked">checkbox2
<input type="checkbox" checked="">checkbox3
複製代碼

HTML5標記示例：

<!DOCTYPE html>
<meta charset="UTF-8">
<title>html5</title>
<p>html5
<br/>html5
複製代碼

新增元素

section元素，表示頁面中的一個內容區塊。

article元素，表示頁面中的一塊與上下文不相關的獨立內容。

aside元素，表示article元素的內容以外的，與article元素的內容相關的輔助信息。

header元素，表示頁面中一個內容區塊或整個頁面的標題。

hgroup元素，用於對整個頁面或頁面中一個內容區塊的標題進行組合。

footer元素，表示整個頁面或頁面中一個內容區塊的腳註。

nav元素，表示頁面中導航連接的部分。

figure元素，表示一段獨立的流內容，通常表示文檔主體流內容中的一個獨立單元。

效果：

web

web

代碼：

<figure>
<figcaption>web</figcaption>
<p>web</p>
</figure>
複製代碼

video元素，定義視頻。

audio元素，定義音頻。

embed元素，用來插入各類多媒體。

mark元素，用來在視覺上向用戶呈現那些須要突出顯示或高亮顯示的文字。

progress元素，表示運行中的進程。

time元素，表示日期或時間。

ruby元素，表示ruby註解。

rt元素，表示字符的解釋或發音。

rp元素，表示在ruby註解中使用，以定義不支持ruby元素的瀏覽器所顯示的內容。

wbr元素，表示軟換行。

canvas元素，表示圖形，好比圖表和其餘圖像。

效果：

代碼示例：

<canvas style="background-color: red;" id="myCanvas" width="100" height="100"></canvas>
複製代碼

command元素，表示命令按鈕，好比單選按鈕，複選框或按鈕。

代碼：

<command onclick="cut()" label="cul">
複製代碼

details元素，表示用戶要求獲得而且能夠獲得的細節信息。

html-詳情 web

代碼：

<details>
 <summary>html-詳情</summary>
 web
</details>
複製代碼

datalist元素，表示可選數據的列表

datagrid元素，表示可選數據的列表，它以樹形的形式來顯示。

keygen元素，表示生產密鑰。

output元素，表示不一樣類型的輸出，好比腳本的輸出。

source元素，表示用來爲媒介元素定義媒介資源。

menu元素，表示菜單列表。

效果：

  • web
  • it
    •

    代碼：

    <menu>
 <li><input type="checkbox"/>web</li>
 <li><input type="checkbox"/>it</li>
</menu>
複製代碼

    input新增元素的類型

    email表示必須輸入E-mail地址的文本輸入框。

    url表示必須輸入url地址的文本輸入框。

    number表示必須輸入數值的文本輸入框。

    range表示必須輸入必定範圍內數字值的文本輸入框。

    Date Pickers

    date-選取日，月，年

    month-選取月，年

    week-選取周和年

    time-選取時間，日，月，年

    datetime-選取時間，日，月，年

    datetime-local-選取時間，日，月，年

    html5已不支持frame框架，只支持iframe框架。

    表單新增屬性

    multiple屬性容許上傳文件時一次上傳多個文件。

    爲input元素，button元素，form元素增長了novalidate屬性，該屬性取消提交時進行的有關檢查，表單能夠被無條件地提交。

    爲ol元素添加reversed，表示列表倒序顯示。

    meta元素增長charset屬性。

    menu元素增長了兩個新的屬性——type與label。

    爲style元素增長scoped屬性，用來規定樣式的做用範圍。

    爲script元素增長async屬性，它定義腳本是否異步執行。

    全局屬性

    contentEditable屬性，功能是容許用戶編輯元素中的內容，該元素是能夠得到鼠標焦點的元素，並且在點擊鼠標後，要向用戶提供一個插入符號，提示用戶該元素中的內容容許編輯。

    除了contentEditable屬性外，元素還具備一個isContentEditable屬性，當元素可編輯時，該屬性爲true，當元素不可編輯時，該屬性爲false。

    示例：

    <ul contentEditable="true">
<li>元素1</li>
</ul>
複製代碼

    designMode屬性，表示整個頁面是否可編輯。使用JavaScript腳原本指定designMode屬性的方法以下所示：document.designMode="on"。

    hidden屬性，全部的元素都容許使用一個hidden屬性。該屬性相似於input元素中的hidden元素，是用來不渲染該元素，讓元素處於不可見狀態。

    spellcheck屬性，是對用戶輸入的文本內容進行拼寫和語法檢查。spellcheck屬性是一個布爾值的屬性，具備true和false兩種值。

    tabindex屬性，當不斷敲擊tab鍵讓窗口或頁面中的控件得到焦點，對窗口或頁面中的全部控件進行遍歷的時候，每個控件的tabindex表示該控件是第幾個被訪問到的。

    HTML5新增

    article元素，section元素，nav元素，aside元素，header元素，hgroup元素，footer元素，address元素。

    article元素表明文檔，頁面或應用程序中獨立的，完整的，能夠獨自被外部引用的內容。

    article示例：

    <article>
 <header>
  <h1>web</h1>
  <p>日期</p>
 </header>
 <footer>
  <p>web</p>
 </footer>
</article>
複製代碼

    aside元素用來表示當前頁面或文章的附屬信息部分。

    time元素表明24小時中的某個時刻或某個日期，表示時刻時容許帶時差。

    pubdate屬性是一個可選的，boolean值的屬性，用於article元素中的time元素上。

    代碼：

    <header><h1>頁面標題</h1></header>
複製代碼

    hgroup元素是將標題以及其子標題進行分組的元素。

    footer元素能夠做爲其上層父級內容區塊或是一個根區塊的腳註。

    代碼：

    <div id="footer">
<ul>
 <li>web</li>
</ul>
</div>
複製代碼

    內容區塊的編排，能夠分「顯示編排」與「隱式編排」兩種方式。

    表單與文件

    form屬性示例

    示例代碼：

    <form id="testform">
 <input type="text">
 </form>
 <textarea form="testform"></textarea>
複製代碼

    formaction屬性

    formaction，增長不一樣的此屬性，可使得點擊不一樣的按鈕，將表單提交到不一樣的頁面。

    formmethod屬性

    每一個表單內也只有一個method屬性來指統一指定提交方法。在HTML5中，可使用formation屬性來對每一個表單元素分別指定不一樣的提交頁面，同時也可使用formmethod屬性來對每一個表單元素分別指定不一樣的提交方法。

    placeholder是指當文本框處於未輸入狀態時顯示的輸入提示，autofocus屬性自動獲取光標焦點。

    <input type="text" autofocus>
複製代碼

    autocomplete屬性，輔助輸入所用的自動完成功能。

    input元素，search用於搜索，tel用於電話，url用於輸入url格式，email用於輸入email格式的文字，number用於數值輸入文本框，range只容許輸入一段範圍內數值的文本框。color顏色選擇文本框。file文本選擇文本框。










    代碼：

    <input name="url" type="url" value="http://www.microsoft.com">
<br/>
<input name="email" type="email" value="2397923107@qq.com">
<br/>
<input name="date"  type="date" value="2020-02-02">
<br/>
<input name="time" type="time" value="10:00">
<br/>
<input name="datetime" type="datetime">
<br/>
<input name="datetime-local" type="datetime-local">
<br/>
<input name="month" type="month" value="2010-10">
<br/>
<input name="week" type"week" value="2010-w40">
<br/>
<input name="number" type="number" value="23" min="10" max="100" step="5">
<br/>
<input name="range" type="range" value="30" min="0" max="100" step="5">
複製代碼

    output元素的追加，定義不一樣類型的輸出。

    代碼：

    <input name="range1" type="range" min="0" max="100" step="5"/>
<output onforminput="value=range1.value">50</output>
複製代碼

    required屬性，提示用戶這個元素中必須輸入內容。

    pattern屬性，要求輸入內容符合必定的格式。

    step屬性控制元素中的值增長或者減小時的步幅。

    顯式驗證，checkValidiity方法，調用該方法，顯式地對錶單內全部元素內容或單個元素內容進行有效性驗證。

    cite元素表示做品的標題。

    file控件內只容許放置一個文件，multiple屬性，file控件內容許一次放置多個文件。FileList對象爲這些file對象的列表，表明用戶選擇的全部文件。

    Blob對象

    Blob對象表示二進制原始數據，它提供了一個slice方法。blob對象有兩個屬性，size屬性表示一個blob對象的字節長度，type屬性表示blob的mime類型。

    blob對象使用示例

    var file;
// 獲得用戶選擇的第一個文件
file=document.getElementById("file").files[0];
var size = document.getElementById("size");
// 顯示文件字節長度
size.innerHTML=file.size;
var type=document.getElementById("type");
// 顯示文件類型
type.innerHTML=file.type;
複製代碼

    代碼：

    <input type="file" id="file" accept="image/*"/>
複製代碼

    FileReader接口主要用來把文件讀入內存，而且讀取文件中的數據。

    if(typeof FileReader == 'undefined'){
    alert("web")
}else{
    var reader = new FileReader();
}
複製代碼

    支持拖動處理的mime的類型爲如下幾種：

    text/plain:文本文字

    text/html:HTML文字

    text/xml：xml文字

    text/uri-list:url列表，每一個url爲一行。

    canvas元素

    canvas元素是很重要，能夠畫出圖形與圖像。

    canvas元素指定id，width，height三個屬性。

    在body的屬性中，使用了onload="draw('canvas');"語句，調用腳本文件中的draw函數進行圖形描畫。

    用canvas元素繪製圖形時。

    1. 取得canvas元素，用document.getElementById等方法取得canvas對象。
    2. 取得上下文，進行繪製圖形時，須要使用圖形上下文，它是一個封裝不少繪圖功能的對象，須要使用canvas對象的getContext方法來得到圖形上下文。
    3. 填充和繪製邊框，填充爲fill，繪製邊框stroke。填充表示填滿圖形內部，繪製邊框是指只繪製圖形的邊框。
    4. 設定繪圖樣式，主要是用於圖形的顏色，但不限於圖形的顏色。第一，設定填充圖形的樣式，fillStyle屬性，填充的樣式，在該屬性中填充的顏色值。第二，設定圖形邊框的樣式，strokeStyle屬性，圖形邊框的樣式，在該屬性中填入邊框的顏色值。
    5. 指定線寬，使用圖形上下文對象的lineWidth屬性設置圖形邊框的寬度。在繪製圖形的時候，任何直線均可以經過lineWidth屬性來指定直線的寬度。
    6. 指定顏色值，填充顏色和邊框的顏色分別經過fillStyle屬性和strokeStyle屬性。（rgb（紅，綠，藍）或rgba（紅，綠，藍，通明度））。
    7. 繪製矩形，使用fillRect方法和strokeRect方法來填充矩形和繪製矩形邊框。

    context.fillRect(x,y,width,height) context.strokeRect(x,y,width,height)

    座標原點爲canvas畫布的最左上角

    代碼示例：

    <script>
function draw(id) {
    var canvas = document.getElementById(id);
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle="#EEEEFF";
    context.fillRect(0,0,400,300);
    context.fillStyle="red";
    context.strokeStyle="blue";
    context.lineWidth=1;
    context.fillRect(50,50,100,100);
    context.strokeRect(50,50,100,100);
}
</script>
複製代碼

    clearRect方法，該方法將擦除指定的矩形區域中的圖形，讓矩形區域中的顏色所有變爲透明。

    context.clearRect(x,y,width,height)

    代碼：

    <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>
<canvas id="canvasId"></canvas>
<script>
    var canvas = document.getElementById('canvasId');
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle="#EEEEFF";
    context.fillRect(0,0,400,300);
    var n = 0;
    for(var i=0;i<10;i++){
        context.beginPath();
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle = 'rgba(255,0,0,0.25)';
        context.fill();
    }
</script>

</body>
</html>
複製代碼

    圖形繪製：

    • 使用圖形上下文對象的beginPath方法：context.beginPath()，這個方法不使用參數。調用這個方法，開始路徑的建立。
    • context.arc(x,y,radius,startAngle,endAngle,anticlockwise)建立圓形路徑。

    radius爲原型半徑，startAngle爲開始角度，endAngle爲結束角度，anticlockwise爲是否按順時針方向進行繪製。

    arc方法能夠用來繪製圓形，和繪製圓弧，開始角度與結束角度決定了弧度，anticlockwise參數爲布爾值的參數。true按順時繪製，false按逆時針方向繪製。

    • 關閉路徑，使用圖形上下文對象的closePath方法將路徑關閉。context.closePath()，這步操做只是路徑建立完成而已，並無繪製任何圖形。
    • 繪製樣式，context.fillStyle='rgba(255,0,0,0.25)';

    moveTo和lineTo

    moveTo方法的做用是將光標移動到指定座標點，繪製直線的時候以這個座標點爲起點。moveTo(x,y)，x爲橫座標，y爲縱座標。

    lineTo方法在moveTo方法中指定的直線起點與參數中指定的直線終點繪製一條直線。

    lineTo(x,y)，x表示直線終點的橫座標，y爲直線終點的縱座標。

    貝濟埃曲線

    貝濟埃曲線繪製使用bezierCurveTo方法

    該方法的定義：

    context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

    擁有6個參數。繪製貝濟埃曲線須要兩個控制點，cp1,cp2，x,y分別爲曲線終點的橫縱座標。

    繪製貝濟埃曲線示例：

    效果

    代碼：

    <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    點擊
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle = '#EEEFF';
    context.fillRect(0,0,400,300);
    var n = 0;
    var dx = 150;
    var dy = 150;
    var s = 100;
    context.beginPath();
    context.globalCompositeOperation = 'and';
    context.fillStyle = 'rgb(100,255,100)';
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI / 15 * 11;
    context.moveTo(dx,dy);
    for(var i=0; i<30; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.bezierCurveTo(dx+x+s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
    }
    context.closePath();
    context.fill();
    context.stroke();
}

</script>

</body>
</html>
複製代碼

    使用quadraticCureTo方法繪製二次樣條曲線。

    context.quadraticCurveTo(in float cpx, in float cpy,in float x,in float y)。

    二次樣條曲線比繪製貝濟埃曲線容易繪製，二次樣條曲線須要兩個控制點，貝濟埃曲線只須要一個控制點。

    繪製漸變圖形

    繪製線性漸變

    fillStyle方法能夠填充顏色外，還能夠指定填充的對象。

    漸變：指填充時從一種是顏色慢慢過渡到另一種顏色。

    兩點之間的線性漸變

    context.createLinearGradient(xStart, yStart, xEnd, yEnd);

    使用四個參數。

    使用這個方法建立了一個使用兩個座標點的LinearGradient對象。使用addColorStop方法進行設定漸變的顏色。

    context.addColorStop(offset, color);

    offset的值是一個範圍在0到1之間的浮點值，漸變起始點的偏移量爲0，結束點爲1。它爲所設定的顏色離開漸變起始點的偏移量。

    漸變，須要至少使用兩次addColorStop方法以追加兩個顏色。

    HTML5 canvas fillRect() 方法

    繪製 150*100 像素的已填充矩形：

    fillRect() 方法繪製「已填色」的矩形。默認的填充顏色是黑色。

    JavaScript:

    var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);
複製代碼

    JavaScript 語法：

    context.fillRect(x,y,width,height);

    參數值

    參數 描述
    x 矩形左上角的 x 座標
    y 矩形左上角的 y 座標
    width 矩形的寬度，以像素計
    height 矩形的高度，以像素計

    HTML5 canvas createLinearGradient() 方法

    定義從黑到白的漸變（從左向右），做爲矩形的填充樣式：

    JavaScript:

    var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
複製代碼

    createLinearGradient() 方法建立線性的漸變對象。

    JavaScript 語法：

    context.createLinearGradient(x0,y0,x1,y1);

    參數值

    參數 描述
    x0 漸變開始點的 x 座標
    y0 漸變開始點的 y 座標
    x1 漸變結束點的 x 座標
    y1 漸變結束點的 y 座標

    定義用藍色填充的矩形：

    JavaScript:

    var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
複製代碼

    漸變效果：

    代碼：

    <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    點擊
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    var g1 = context.createLinearGradient(0,0,0,300);
    g1.addColorStop(0,'rgb(255,255,0)');
    g1.addColorStop(1,'rgb(0,255,255)');
    context.fillStyle=g1;
    context.fillRect(0,0,400,300);
    var n = 0;
    var g2 = context.createLinearGradient(0,0,300,0);
    g2.addColorStop(0, 'rgba(0,0,255,0.5)');
    g2.addColorStop(1, 'rgba(255,0,0,0.5)');
    for(var i=0; i<10; i++){
        context.beginPath();
        context.fillStyle = g2;
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
        context.closePath();
        context.fill();
    }

}

</script>

</body>
</html>
複製代碼

    繪製徑向漸變

    徑向漸變：指沿着圓形的半徑向外進行擴散的漸變方式。

    使用圖形上下文對象的createRadiaGradient方法繪製。

    context.createRadiaGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

    須要使用6個參數。

    參數 描述
    xStart 漸變開始圓的圓心橫座標
    yStart 漸變開始圓的圓心縱座標
    radiusStart 開始圓的半徑
    xEnd 漸變結束圓的圓心橫座標
    yEnd 漸變結束原型縱座標
    radiusEnd 結束圓的半徑

    設定顏色也是使用addColorStop方法。同理的0到1之間的浮點數做爲漸變轉折點的偏移量。

    繪製徑向漸變效果：

    使用createRadialGradient方法，使用addColorStop方法：

    HTML5 canvas beginPath() 方法

    在畫布上繪製兩條路徑；紅色和藍色：

    定義和用法

    beginPath() 方法開始一條路徑，或重置當前的路徑。

    開始一條路徑，移動到位置 0,0。建立到達位置 300,150 的一條線：

    JavaScript:

    var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
複製代碼

    JavaScript:

    var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.lineWidth="5";//設置線段厚度的屬性
ctx.strokeStyle="red"; // 紅色路徑
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 進行繪製

ctx.beginPath();
ctx.strokeStyle="blue"; // 藍色路徑
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // 進行繪製
複製代碼

    繪製徑向漸變效果：

    代碼：（注意單詞拼寫）

    <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    點擊
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    var g1 = context.createRadialGradient(400,0,0,400,0,400);
    g1.addColorStop(0.1,'rgb(255,255,0)');
    g1.addColorStop(0.3,'rgb(255,0,255)');
    g1.addColorStop(1,'rgb(0,255,255)');
    context.fillStyle=g1;
    context.fillRect(0,0,400,300);
    var n = 0;
    var g2 = context.createRadialGradient(250,250,0,250,250,300);
    g2.addColorStop(0.1,'rgba(255,0,0,0.5)');
    g2.addColorStop(0.7,'rgba(255,255,0,0.5)');
    g2.addColorStop(1,'rgba(0,0,255,0.5)');
    for(var i=0; i<10; i++){
        context.beginPath();
        context.fillStyle = g2;
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
        context.closePath();
        context.fill();
    }
}

</script>

</body>
</html>
複製代碼

    繪製變形圖形

    座標變換

    變形：使用Canvas API的座標軸變換處理功能能夠實現。

    繪製圖形，默認狀況下，Canvas畫布的最左上角對應的是座標軸的原點。即爲（0，0）。

    對座標進行處理，就能夠實現圖形的變形。

    三種方式：

    1. 平移
    2. 擴大
    3. 旋轉

    平移：使用圖形上下文對象的translate方法移動座標軸原點。

    方法：context.translate(x,y)，x,y爲移動多少個單位。

    擴大：使用圖形上下文對象的scale方法將圖形放大。

    方法：context.scale(x,y)，x,y爲該方向上放大倍數。

    旋轉：使用圖形上下文對象的rotate方法將圖形進行旋轉。

    方法：context.rotate(angle)，angle爲旋轉的角度，旋轉爲順時針方向，逆時針須要將參數設置爲負數。

    座標變換示例：

    代碼：

    <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    點擊
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle = '#EEEEFF';
    context.fillRect(0,0,400,300);
    // 圖形繪製
    context.translate(200,50);
    context.fillStyle='rgba(255,0,0,0.25)';
    for(var i=0; i<50; i++){
        context.translate(25,50);
        context.scale(0.95,0.95);
        context.rotate(Math.PI/10);
        context.fillRect(0,0,100,50);   
    }
    
}

</script>

</body>
</html>
複製代碼

    對使用路徑繪製出來的圖像進行變形

    學習translate,scale,rotate方法。

    效果：將座標變換和路徑結合使用

    代碼：

    <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    點擊
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle = '#EEEEFF';
    context.fillRect(0,0,400,300);
    // 圖形繪製
    context.translate(200,50);
    for(var i=0; i<50; i++){
        context.translate(25,50);
        context.scale(0.95,0.95);
        context.rotate(Math.PI/10);
        create5Star(context);
        context.fill();
    }
    
}
function create5Star(context){
    var n = 0;
    var dx=100;
    var dy=0;
    var s=50;
    context.beginPath();
    context.fillStyle='rgba(255,0,0,0.5)';
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig =Math.PI/5*4;
    for(var i=0;i<5;i++){
        var x =Math.sin(i*dig);
        var y =Math.cos(i*dig);
        context.lineTo(dx+x*s,dy+y*s);
    }
    context.closePath();
}

</script>

</body>
</html>
複製代碼

    矩陣變換

    利用矩陣變換實現的變形技術

    使用圖形上下文對象的transforms方法修改變換矩陣

    context.transform(m11, m12, m21, m22, dx, dy)

    參數 描述
    dx 將座標原點在x軸上向右移動x個單位
    dy 將座標原點在y軸上向下移動y個單位

    矩陣方法須要從新找文檔進行深刻學習。以前的圖形變形提到的三個方法，其實是隱式地修改了變換矩陣。

    下面可使用transform方法進行代替：translate(x,y),scale(x,y),rotate(angle)。

    用transform方法實現變形的示例

    代碼：

    <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    點擊
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    var colors = ["red","orange","yellow","green","blue","navy","purple"];
    context.lineWidth = 10;
    context.transform(1,0,0,1,100,0)
    for(var i=0;i<colors.length;i++){
        context.transform(1,0,0,1,0,10);
        context.strokeStyle=colors[i];
        context.beginPath();
        context.arc(50,100,100,0,Math.PI,true);
        context.stroke();
    }
}


</script>

</body>
</html>
複製代碼

    使用setTransform方法：

    context.setTransform(m11, m12, m21, m22, dx, dy)

    繪製變形圖形的示例：

    HTML 5 canvas strokeStyle 屬性

    繪製一個矩形。請用藍色的筆觸顏色：

    strokeStyle 屬性設置或返回用於筆觸的顏色、漸變或模式。

    JavaScript:

    var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
複製代碼

    繪製一個矩形。使用漸變筆觸：

    JavaScript:

    var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// 用漸變進行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
複製代碼

    HTML5 canvas strokeRect() 方法

    繪製 150*100 像素的矩形：

    JavaScript:

    var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);
複製代碼

    效果：

    代碼：

    <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    點擊
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.strokeStyle = "red";
    context.strokeRect(30,10,60,20);
    var rad = 45*Math.PI/180;
    context.setTransform(Math.cos(rad),Math.sin(rad),-Math.sin(rad),Math.cos(rad),0,0);
    context.strokeStyle = "blue";
    context.strokeRect(30,10,60,20);
    context.setTransform(2.5,0,0,2.5,0,0);
    context.strokeStyle = "green";
    context.strokeRect(30,10,60,20);
    context.setTransform(1,0,0,1,40,80);
    context.strokeStyle = 'gray';
    context.strokeRect(30,10,60,20);
}


</script>

</body>
</html>
複製代碼

    在h5中，只要使用圖形上下文對象的globalCompositeOperation屬性就能決定圖形的組合方式：

    context.globalCompositeOperation=type

    type的值：

    1. source-over默認值，表示新圖形覆蓋在原有的圖形之上。
    2. destination-over，表示在原有圖形之下繪製新圖形。
    3. source-in新圖形與原有圖形做in運算，只顯示新圖形中與原有圖形相重疊的部分，新圖形與原有圖形的其餘部分均變成透明。
    4. destination-in，原有圖形與新圖形做in運算，只顯示原有圖形中與新圖形重疊的部分，新圖形與原有圖形的其餘部分均變成透明。
    5. source-out新圖形與原有圖形做out運算，只顯示新圖形中與原有圖形不重疊的部分，新圖形與原有圖形的其餘部分均變成透明。
    6. destination-out原有圖形與新圖形做out運算，只顯示原有圖形中與新圖形不重疊的部分，新圖形與原有圖形的其餘部分均變成透明。
    7. source-atop只繪製新圖形中與原有圖形重疊的部分與未重疊覆蓋的原有圖形，新圖形的其餘部分變成透明。
    8. destination-atop只繪製原有圖形中被新圖形重疊覆蓋的部分與新圖形的其餘部分，原有圖形中的其餘部分變成透明，不繪製新圖形中與原有圖形相重疊的部分。
    9. lighter原有圖形與新圖形均繪製，重疊部分作加色處理。
    10. xor只繪製新圖形中與原有圖形不重疊的部分，重疊部分變成透明。
    11. copy只繪製新圖形，原有圖形中未與新圖形重疊的部分變成透明。

    圖形組合示例效果：

    代碼：

    <!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    點擊
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    var oprtns = new Array(
        "source-atop",
        "source-in",
        "source-out",
        "source-over",
        "destination-atop",
        "destination-in",
        "destination-out",
        "destination-over",
        "lighter",
        "copy",
        "xor"
    );
    i=8;
    context.fillStyle = "blue";
    context.fillRect(10,10,60,60);
    context.globalCompositeOperation = oprtns[i];
    context.beginPath();
    context.fillStyle = "red";
    context.arc(60,60,30,0,Math.PI*2,false);
    context.fill();
}


</script>

</body>
</html>
複製代碼

    給圖形繪製陰影

    利用圖形上下文對象的屬性：

    1. shadowOffsetX-陰影的橫向位移量
    2. shadowOffsetY-陰影的縱向位移量
    3. shadowColor陰影的顏色
    4. shadowBlur陰影的模糊範圍

    繪製圖像

    使用drawImage方法，繪製圖像：

    • context.drawImage(image,x,y)
    • context.drawImage(image,x,y,w,h);
    • context.drawImage(image,sx,sy,sh,dx,dy,dw,dh)

    平鋪效果

    createPattern方法：

    context.createPattern(image,type)

    參數 描述
    image 要平鋪的圖像
    type 參數的值no-repeat，repeat-x，repeat-y，repeat
    1. no-repeat不平鋪
    2. repeat-x橫方向平鋪
    3. repeat-y縱方向平鋪
    4. repeat全方向平鋪

    像素處理

    使用圖形上下文對象的getImageData方法來獲取圖像中的像素：

    var imagedata = context.getImageData(sx,sy,sw,sh)

    在HTML5中：繪製文字

    繪製文字

    使用fillText方法或者strokeText方法：

    fillText方法用來填充方式繪製字符串：

    void fillText(text,x,y,[maxWidth]);

    strokeText方法用輪廓方式繪製字符串：

    void stroke Text(text, x, y, [maxWidth]);

    使用measureText方法來獲得文字的寬度：

    metrics = context.measureText(text)

    保存與恢復狀態

    使用Canvas API中的save和restore兩個方法。

    保存文件，在Canvas API中保存文件的原理其實是把當前的繪畫狀態輸出到一個data URL地址所指向的數據中的過程。爲data URL，是目前大多數瀏覽器可以識別的一種base64位編碼的URL。

    主要用於小型的，能夠在網頁中嵌入的，不須要從外部文件嵌入的數據。

    使用toDataURL方法把繪畫狀態輸出到一個data URL中，而後從新裝載。

    toDataURL的使用方法：

    canvas.toDataURL(type)

    後記

    閱讀文章：

    《HTML5與CSS3權威指南》

    • 拉你進技術羣，長期交流學習...
    • 歡迎關注，認真學前端，作個有專業的技術人...

    掃碼關注公衆號，訂閱更多精彩內容。

    相關文章
    相關標籤/搜索
    每日一句
      每一个你不满意的现在，都有一个你没有努力的曾经。
    本站公眾號
       歡迎關注本站公眾號,獲取更多信息
    聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程