這是一份你值得保存學習的HTML5技術干貨整理分享

記得在過去的Web前端開發(fā)中，如果你需要繪圖或者生成相關圖形的話，使用Flash可能是你唯一或者說最強大的實現(xiàn)方式，而在近些年的技術熱點HTML5標準中，HTML Canvas（畫布）能夠更加方便的幫助你實現(xiàn)2D繪制圖形圖像及其各種動畫效果功能。

首先我們先來了解一下什么是HTML Canvas？

我們可以在HTML中使用屬性width和height來定義Canvas。但是實現(xiàn)Canvas的相關功能主要還依賴于Javascript實現(xiàn)，即HTML5 Canvas API。我們使用javascript來訪問和控制Canvas相關的區(qū)域，比如調用相關繪圖的方法，用來動態(tài)的生成需要的動畫或者圖形。

接下來我們來看看canvas的特性：

互動性：Canvas支持互動，可以很好的響應用戶的操作，我們可以通過Javascript來監(jiān)鍵盤，鼠標，及其觸摸設備相關事件。

動畫：任何被canvas繪制的圖形都可以添加動畫，簡單的彈跳球或者復雜的HTML5游戲都可以實現(xiàn)

靈活性：開發(fā)人員可以使用Canvas來繪制任何的內容，比如，直線，圖形，文字，圖片等，可以包含動畫或者不包含。同時你可以添加音頻或者視頻瀏覽器支持：幾乎所有的現(xiàn)代瀏覽器都支持，并且被廣泛的各種設備支持，例如，桌面，平板，智能手機等等。

流行度：canvas目前很流行，很多的開發(fā)人員都使用它來開發(fā)類似游戲或者繪圖類應用

web標準：只需要有瀏覽器就可以運行，而非flash或者silverlight，需要安裝相關的插件

開發(fā)一次，任何瀏覽器都可以運行（當然，不包括老式瀏覽器）

可以使用免費擁有大量的開發(fā)工具及其類庫。

使用HTML5 Canvas我們能開發(fā)那些相關產品或者應用呢？

1 可視化數(shù)據(jù)：各類統(tǒng)計圖表，比如:百度的echart

2 場景秀：用Canvas實現(xiàn)動態(tài)的廣告效果能夠非常融洽的跨平臺運行。如:手機中微產品.在移動端兼容性很好。

3 游戲：canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas成為HTML5小游戲開發(fā)首選。現(xiàn)階段h5做游戲,營業(yè)方式不是很明確. 25 超棒的 HTML5 Canvas 游戲。

4 其他可嵌入網(wǎng)站的內容 (多用于活動頁面、特效)：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。

5 趨勢=> 模擬器：無論從視覺效果還是核心功能方面來說，模擬器產品可以完全由JavaScript來實現(xiàn)。模擬真實硬件環(huán)境,如移動端各種類型手機.

6 趨勢=> 遠程計算機控制： Canvas可以讓開發(fā)者更好地實現(xiàn)基于Web的數(shù)據(jù)傳輸，構建一個完美的可視化控制界面。

7 趨勢=> 圖形編輯器： Photoshop圖形編輯器將能夠100%基于Web實現(xiàn)。

如何使用HTML5 Canvas？

使用HTML5 canvas其實非常簡單，每一個canvas都擁有一個上下文（context）。使用它你可以來調用相關的畫布方法。

<p>您的瀏覽器不支持HTML5 Canvas</p>

</canvas>

以上代碼我們在HTML中添加了一個canvas標簽，如果瀏覽器不支持canvas，會顯示<p>標簽的內容，當然，如果你需要支持老式瀏覽器你也可以使用flash或者其它方法來做一個替代的解決方案。

var canvas=document.getElementById('mycanvas'),

context=canvas.getContext(‘2d’);

以上代碼我們通過canvas取到2D的context。

在HTML5 Canvas的2D結構中，坐標（0,0）在左上方，這和傳統(tǒng)的坐標不太一樣。大家需要注意一下，如下圖所示：

下面來說一下canvas的API：

canvas的主要屬性和方法：

save():保存當前環(huán)境的狀態(tài)

restore():返回之前保存過的路徑狀態(tài)和屬性

createEvent()

getContext():返回一個對象，指出訪問繪圖功能必要的API

toDateURL():返回canvas圖像的URL

顏色、樣式和陰影屬性和方法：

fillStyle:設置或返回用于填充繪畫的顏色、漸變或模式

strokeStyle:設置或返回用于筆觸的顏色、漸變或模式

shadowColor:設置或返回用于陰影的顏色

shadowBlur:設置或返回用于陰影的模糊級別

shadowOffsetX:設置或返回陰影距形狀的水平距離

shadowOffsetY:設置或返回陰影距形狀的垂直距離

createLinearGradient():創(chuàng)建線性漸變（用在畫布內容上）

createPattern():在指定的方向上重復指定的元素

createRadialGradient():創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內容上）

addColorStop():規(guī)定漸變對象中的顏色和停止位置

線條樣式屬性和方法

lineCap:設置或返回線條的結束端點樣式

lineJoin:設置或返回兩條線相交時，所創(chuàng)建的拐角類型

lineWidth:設置或返回當前的線段寬度

miterLimit:設置或返回最大斜接長度

Canvas的API-路徑方法

fill():填充當前繪圖(路徑)

stroke():繪制已定義的路徑

beginPath():起始一條路徑，或重置當前路徑

moveTo():把路徑移動到畫布中的指定點，不創(chuàng)建線條

closePath():創(chuàng)建從當前點回到起始點的路徑

lineTo():添加一個新點，創(chuàng)建從該點到最后指定點的線條

clip():從原始畫布剪切任意形狀和尺寸的區(qū)域

quadraticCurveTo():創(chuàng)建二次貝塞爾曲線

bezierCurveTo():創(chuàng)建三次貝塞爾曲線

arc():創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）

arcTo():創(chuàng)建兩切線之間的弧/曲線

isPointInPath():如果指定的點位于當前路徑中，返回布爾值

Canvas的API-轉換方法

scale():縮放當前繪圖至更大或更小

rotate():旋轉當前繪圖

translate():重新映射畫布上的（0，0）位置

transform():替換繪圖的當前轉換矩陣

setTransform():將當前轉換重置為單位矩陣，然后運行transform（）

Canvas的API-文本屬性和方法

font:設置或返回文本內容的當前字體屬性

textAlign:設置或返回文本內容的當前對齊方式

textBaseline:設置或返回在繪制文本時使用的的當前文本基線

fillText():在畫布上繪制“被填充的”文本

strokeText():在畫布上繪制文本（無填充）

measureText():返回包含指定文本寬度的對象

Canvas的API-圖像繪制方法

drawImage():向畫布上繪制圖像、畫布或視頻

Canvas的API-像素操作方法和屬性

width:返回ImageData對象的寬度

height:返回ImageData對象的高度

data:返回一個對象，其包含指定的ImageData對象的圖像數(shù)據(jù)

createImageData():創(chuàng)建新的、空白的I馬哥Data對象

getImageData():返回ImageData對象，該對象為畫布上指定的矩形復制像素數(shù)據(jù)

putImageData():把圖像數(shù)據(jù)（從指定的ImageData對象）放回畫布上

Canvas的API-圖像合成屬性

globalAlpha:設置或返回繪圖的當前alpha或透明值

globalCompositeOperation:設置或返回新圖像如何繪制到已有的圖像上

快速高效的創(chuàng)建HTML5畫布圖形？

直接使用Canvas來繪制圖形相對來說比較乏味并且麻煩，所以在現(xiàn)代的HTML5 Canvas中我們使用一些現(xiàn)成的第三方類庫幫助我們多快好省的實現(xiàn)圖形繪制的功能：

KineticJS

Paper.js

EaselJS

Fabric.js

oCanvas

Echart.js

做web大概有八年的時間，今天主要給新手想要做HTML5開發(fā)的新手簡單說下HTML5能做為什么以及未來的發(fā)展和一個系統(tǒng)的學習規(guī)劃，目前HTML5有多火，不用我說大家都清楚，很多其他行業(yè)想轉行做HTML5開發(fā)，想要在以后有一個好的發(fā)展前景，HTML5技術的不斷的成熟，各大瀏覽器不斷兼容HTML5最新技術，HTML5被稱為可以改變人們生活的東西。而現(xiàn)在HTML5的競爭也是非常的大，所以說我想要做HTML5開發(fā)一定要先把技術學好才能去找工作。

HTML5都能做什么？

第一：剛出現(xiàn)不久的小程序，很流行，在開發(fā)的過程，HTML5技術就會應用的很多。

第二：移動端是HTML5不可缺少的技術，現(xiàn)在都是移動端的市場，人們手機的一些功能，緩存，音樂，視頻，地位，Canvas繪圖還有大量的特效，好看的效果，都是不可能離開HTML5技術。

第三：現(xiàn)手游的火爆程度，PC端游戲受到了沖擊，比如LOL被王者榮耀沖擊，這是時代的變化，HTML5可以做手機游戲，前景光明。

第四：互聯(lián)網(wǎng)的各種應用，在如今變化多端的互聯(lián)網(wǎng)，好像任何東西都仿佛離不開了HTML5的技術。

下面我說下HTML5的學習路線：

第一階段：HTML+CSS+JS

第一階段要學習基礎的靜態(tài)布局，HTML+CSS，特別提出一定要下功夫攻破JS，JS是最難的，也是前端開發(fā)的工資標準，見過很多人學不懂JS，因為JS的邏輯非常強，要跟著大量的案例進行學習，學習JS方法非常重要，很多在學的時候感覺沒有效率是沒有良好的學習方案

第二階段：HTML5+CSS3+JQ

了解HTML5新特性，CSS3新屬性，換句話說HTML5就是另一個，我上面說的，如果JS學不好，HTML5也很難，本HTML5要和JS完美的配合，而JQ是JS框架，只要原生JS掌握的不錯，學習JQ不是難事。

第三階段：主流框架

前端框架是我們必須要學習的，每一個公司都會用到，但是框架學起來不容易，這些框架都是用原生JS封裝的，再一次強調一下JS的重要性，只要一直做前端永遠都不會離開JS，就是需要JavaScript，所以一定要學好JavaScript，一個好的學習方法非常重要。

剛接觸HTML5的新伙伴多了解這些行情才是學習HTML5開發(fā)的關鍵，找到一個有效率的學習方式才是最重要的，方法不對在努力也是白費，少走彎路就是學習HTML5開發(fā)的捷徑，前端我做開發(fā)將近十年，這些懂得還是很多，有不懂的問題隨時可以請教我，下面有我的HTML5新手學習裙，對于學習方法，學習效率，以后行業(yè)發(fā)展的都可以問我，群里也有很多比較精品的HTML5學習視頻免費分享給新人，希望新手少走彎路。

tml5文件分割上傳解決方案

html5提供的文件API中可以輕松的對文件進行分割切片, 然后通過javascript異步處理向服務器傳輸數(shù)據(jù), 突破對大文件上傳的限制, 同時異步處理在一定程度上也提高了文件上傳的效率。用戶體驗上也優(yōu)于前述方案。

index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>大文件上傳實例</title>
<script type="text/javascript">
    const BYTES_PER_CHUNK=1024 * 1024; // 每個文件切片大小定為1MB .
    var slices;
    var totalSlices;
    //發(fā)送請求
    function sendRequest() {
        var blob=document.getElementById('file').files[0];
        var start=0;
        var end;
        var index=0;
        // 計算文件切片總數(shù)
        slices=Math.ceil(blob.size / BYTES_PER_CHUNK);
        totalSlices=slices;
        while(start < blob.size) {
        end=start + BYTES_PER_CHUNK;
        if(end > blob.size) {
            end=blob.size;
        }
        uploadFile(blob, index, start, end);
        start=end;
        index++;
        }
    }
    //上傳文件
    function uploadFile(blob, index, start, end) {
        var xhr;
        var fd;
        var chunk;
        xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function() {
        if(xhr.readyState==4) {
        if(xhr.responseText) {
            alert(xhr.responseText);
        }
        slices--;
        // 如果所有文件切片都成功發(fā)送，發(fā)送文件合并請求。
        if(slices==0) {
            mergeFile(blob);
            alert('文件上傳完畢');
        }
        }
        };
        chunk=blob.slice(start,end);//切割文件
        //構造form數(shù)據(jù)
        fd=new FormData();
        fd.append("file", chunk);
        fd.append("name", blob.name);
        fd.append("index", index);
        xhr.open("POST", "upload.php", true);
        //設置二進制文邊界件頭
        xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$'));
        xhr.send(fd);
    }
    function mergeFile(blob) {
        var xhr;
        var fd;
        xhr=new XMLHttpRequest();
        fd=new FormData();
        fd.append("name", blob.name);
        fd.append("index", totalSlices);
        xhr.open("POST", "merge.php", true);
        xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$'));
        xhr.send(fd);
    }
</script>
</head>
<body>
<input type="file" id="file"/>
<button onclick="sendRequest()">上傳</button>
</body>
</html>

upload.php

<?php
//省略了文件接收判斷isset部分
//當前目錄下建立一個uploads文件夾
//接收文件名時進行轉碼，防止中文亂碼。
$target="uploads/" .iconv("utf-8","gbk",$_POST["name"]) . '-' . $_POST['index'];
move_uploaded_file($_FILES['file']['tmp_name'], $target);
// Might execute too quickly.
sleep(1);
?>

merge.php

<?php
//文件合并
$target="uploads/" .iconv("utf-8","gbk",$_POST["name"]);
$dst=fopen($target, 'wb');
for($i=0; $i < $_POST['index']; $i++) {
$slice=$target . '-' . $i;
$src=fopen($slice, 'rb');
stream_copy_to_stream($src, $dst);
fclose($src);
unlink($slice);
}
fclose($dst);

關鍵函數(shù)stream_copy_to_stream()

int stream_copy_to_stream ( resource $source , resource $dest [, int $maxlength=-1 [, int $offset=0 ]] )

<?php
$src=fopen('http://www.example.com', 'r');
$dest1=fopen('first1k.txt', 'w');
$dest2=fopen('remainder.txt', 'w');
echo stream_copy_to_stream($src, $dest1, 1024) . " bytes copied to first1k.txt\n";
echo stream_copy_to_stream($src, $dest2) . " bytes copied to remainder.txt\n";
?>

var blob=document.getElementById('file').files[0];
console.dir(blob);

相關的屬性如下:

lastModified: 1511081596000

lastModifiedDate: Sun Nov 19 2017 16:53:16 GMT+0800 (中國標準時間) {}

name: "IMG_20171119_165316.jpg"

size: 4383101

type: "image/jpeg"

slice: ? slice() 用于切割文件

在線咨詢

上一篇：html獨立功能模塊增刪改查實例
下一篇：聽說CSS可以寫tab切換，我也來試一把

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

這是一份你值得保存學習的HTML5技術干貨整理分享

快速高效的創(chuàng)建HTML5畫布圖形？

您的項目需求