整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SVG是構建XML樹的方式來達到繪制圖形的，canvas是通過調用相關的方法來繪制圖形的。
區別：SVG繪制圖形，通過移除或者更改DOM方式來而使用canvas需要把圖片從新擦除。
繪制的API在繪制上下文中定義。而不在畫布中定義。
需要獲得上下文對象的時候，需要調用畫布的getContext方法，獲得繪畫的上下文。
畫布元素和上下文，屬于兩個不同的對象，其中畫布元素為canvas畫布，而上下文對象為繪制需要的上下文。
關于3D圖形，即，webGL 為封裝了基本的OPENGL，當調用webGL的時候，其瀏覽器會調用OpenGL相關的API
<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>第一個園</br>
<canvas id="square" width="10" height="100">
</canvas>
</div>
<div>
第二個園
<canvas id="circle" width="10" height="10">
</canvas>
</div>
<script src="./js/index.js" charset="UTF-8"></script>
</body>
</html>
// 獲取畫布元素
let canvas=document.getElementById("square");
// 獲取繪制2D元素上下文
let context=canvas.getContext("2d");
// 設置填充顏色為紅色
context.fillStyle="#f00";
// 填充一個正方形
context.fillRect(10,0,10,10);
// 獲取畫布元素
let canvas=document.getElementById("square");
// 獲取繪制2D元素上下文
let context=canvas.getContext("2d");
// 開始一條路徑
context.beginPath();
// 從100,100 開始定義一條新的子路徑
context.moveTo(100,100);
// 從100 100 到 200 200 繪制一條線段
context.lineTo(200,200);
// 從200 200 到 100 200 繪制一條線段
context.lineTo(100,200);
// 從100 200 到 100 100 繪制一條路徑
context.lineTo(100,100);
// 繪制邊
context.stroke();
// 進行填充
context.fill();
以五邊形為例子，
var canvas=document.getElementById("square");
var context=canvas.getContext("2d");
// 繪制一個以100,100為中心，半徑為20的柜子N變形，每個定點均勻分布在圓角上，第一個定點放置在最上下
// 偏轉角度為0
// 開始定義一條子路徑
context.moveTo(100 + 20 * Math.sin(0), 100 - 20 * Math.cos(0));
// 計算兩個頂點之間夾角
// 其中2π為一個園，除以邊數，得到需要旋轉的角度
var delta=2 * Math.PI/5;
console.log(delta);
// 循環剩余每個頂點
var angle=0;
for(var i=1; i < 5; i++){
// 角度累加
angle +=delta;
// 通過旋轉繪制下一個頂點，不斷的旋轉繪制
context.lineTo(100 + 20 * Math.sin(angle), 100 - 20*Math.cos(angle));
}
// 最后一個頂點和起點進行連接
context.closePath();
// 從新開始一條新路徑
context.stroke();
context.fill();
同理，畫圓
var canvas=document.getElementById("square");
var context=canvas.getContext("2d");
// 繪制一個以100,100為中心，半徑為20的柜子N變形，每個定點均勻分布在圓角上，第一個定點放置在最上下
// 偏轉角度為0
// 開始定義一條子路徑
context.moveTo(100 + 20 * Math.sin(0), 100 - 20 * Math.cos(0));
// 計算兩個頂點之間夾角
// 其中2π為一個園，除以邊數，得到需要旋轉的角度
var delta=2 * Math.PI/500000;
console.log(delta);
// 循環剩余每個頂點
var angle=0;
for(var i=1; i < 500000; i++){
// 角度累加
angle +=delta;
// 通過旋轉繪制下一個頂點，不斷的旋轉繪制
context.lineTo(100 + 20 * Math.sin(angle), 100 - 20*Math.cos(angle));
}
// 最后一個頂點和起點進行連接
context.closePath();
// 從新開始一條新路徑
context.stroke();
context.fill();
非零繞數原則
要檢測一個點p是否在路徑內部，使用非零繞數原則，即，一條從點p出發沿著任意方向無限延伸，或者一直延伸到路徑所在的區域外某點的射線，現在從0開始初始化一個計數器，對穿過這條射線的路徑進行枚舉，每當一條路徑順時針方向穿過射線的時候，計數器加1，逆時針減1，最后，枚舉完所有路徑以后，如果計時器的值不是0，那么就認為p在路徑內，反過來，計數器的值為0，p在路徑外。
js根據非零繞數原則確定那個在路徑內，那個在路徑外，用于進行填充。
可以通過設置畫布上下文的fillStyle等屬性，設置圖形的屬性，例如對畫布上下文的fillStyle的屬性進行設置，即，可以設置出填充時的顏色，漸變，圖案等樣式。
對于canvas來說，每次獲取上下文對象的時候，都會返回同一個上下文對象，即，上下文對象為單例的。
還可以使用save方法，把當前的狀態，壓入已經保存的棧中，調用restore方法，把狀態進行恢復，即彈棧。
畫布的默認的坐標系為左上角的坐標原點(0,0)，右邊數值大，下數值大，使用浮點數指定坐標，但不會自動轉換為整數，會用反鋸齒的方式，模擬填充部分元素。
畫布尺寸不能隨意改變，對任意屬性進行操作，都會清空整個畫布。
每一個點的坐標都會映射到css像素上，css像素會映射到一個或多個設備像素。
畫布中的特定操作，屬性使用默認坐標系。
畫布還有當前變換矩陣。
畫布還有當前變換矩陣，當前變換矩陣作為圖形狀態的一部分。矩陣定義了當前畫布的坐標系。
畫布的操作會把該點映射到當前的坐標系中。
坐標變換
當調用c.translate(dx,dy)方法的時候，會進行如下變換
translate會進行坐標的上下移動
x'=x + dy; y'=y + dy;
縮放
如要進行縮放，進行的是如下的變換
x'=sx * x; y'=sy * y;
進行旋轉操作，進行的是如下變換
x'=x * cos(a) - y * sin(a); y'=y * cos(a) - x * sin(a);
如果要先變換再伸縮，進行如下變換
需要先把現有坐標系映射成為坐標系中的點x’， y’ 然后再變換到x‘’ ， y‘’
x''=sx*x + dx; y''=sy*y + dy;
如果變換順序相反進行如下變換
x''=sx*(x + dx); y''=sy*(y + dy);
這種變換稱為仿射變換，并且仿射變換會修改點的距離和線段間的夾角。對于平行線來說，仿射變換也會保持平行。仿射變換用6個參數描述成為如下表述
x'=ax + cy + e; y'=bx + dy + f;
通過傳入參數實現仿射變換
對于坐標變換來說，除非進行刷新，否則，已經繪制的圖形，不會進行消失，所有的變換，都不能對已經繪制的圖形進行更改。栗子如下
var canvas=document.getElementById("square");
var context=canvas.getContext("2d");
// 通過坐標變換實現科赫雪花
// 開始一條路徑
context.beginPath();
// 開始繪制子路徑
context.moveTo(100,100);
// 繼續繪制
context.lineTo(200,200);
// 繼續繪制
context.lineTo(200,200);
// 進行繪制邊
context.stroke();
context.translate(200,200);
// 開始一條路徑
context.beginPath();
// 開始繪制子路徑
context.moveTo(100,100);
// 繼續繪制
context.lineTo(200,200);
// 繼續繪制
context.lineTo(200,200);
// 進行繪制邊
context.stroke();
已經繪制的圖形不會進行改變，改變的是已經繪制的圖形
var canvas=document.getElementById("square");
var context=canvas.getContext("2d");
// 通過坐標變換實現科赫雪花
// 當前狀態入棧
function leg(n) {
// 保存狀態
context.save();
// 遞歸畫
if(n==0){
context.lineTo(50, 0);
}else{
// 定義為v字型
context.scale(1/2,1/2);
// 遞歸第一條
context.rotate(60 * (Math.PI / 180));
leg(n - 1);
context.rotate(-120 * (Math.PI / 180));
leg(n - 1);
}
// 坐標恢復變換
context.restore();
// 恢復下一個坐標為0,0
context.translate(50, 0);
}
context.save();
context.moveTo(50, 50);
// 繪制第一條
leg(1);
context.stroke();
繪制一些常見的圖形
var canvas=document.getElementById("square");
var context=canvas.getContext("2d");
// 工具函數，角度轉弧度
function rads(x) {
return Math.PI * x / 180;
}
// 繪制園
context.beginPath();
context.arc(100,100,40, 0, rads(360), false);
context.stroke();
context.fill();
同理繪制貝塞爾曲線也是同理。
繪制一個漸變
需要使用createLinearGradient獲取一個進行漸變的上下文，對這個上下文進行處理。然后其顏色設置為這個漸變的上下文，即，fillStyle屬性。
封頂
對于線段，有三種封頂方式，即，butt，square，round
在繪制圖形以后，會參數尖角，圓角，平角，三種。
lineCap屬性
和css類似，基線問題。
直接調動clip即可，當前路徑也會被裁剪進入，路徑外的統統不會顯示。
設置shadow屬性即可
畫布API支持位圖圖片，同時也支持canvas導出成為圖片。
// 創建一個img元素
let img=document.createElement("img");
// 設置src屬性
img.src=canvas.toDataURL();
// 追加到文檔后面
document.body.appendChild(img);
一些api不在闡述
調用getImageDate方法返回ImageDate對象
使用createImageDate()可以創建像素容器
進行動態模糊先獲取像素的ImageDate對象，然后再獲取該對象的data屬性，該data為一個數組。為一個維數組。每四個元素代表紅色分量，綠色分量，藍色分量，透明度分量。（Alpha分量）
其色素直為0-1，即，數組元素中保存的數組為色素值。
每四個每四個元素遍歷。然后把其色素值的1/ n + 上一個色塊的m/n 然后賦值給新的色塊，代碼如下
// row為行數
for(var row=0; row < height; row++){
// 獲得每行第二個元素的偏移量，其中width為行的色素塊。
var i=row * width * 4;
// 每4個的色素值進行處理
for(var col=1; col < width; col++, i+=4){
// 對紅色分量處理
data[i]=(data[i] + data[i - 4] * m) / n;
// 對綠色分量處理
data[i + 1]=(data[i + 1] + data[i + 1 - 4] * m) / n;
// 對藍色分量處理
data[i + 2]=(data[i + 2] + data[i + 2 - 4] * m) / n;
// 對透明度分量處理
data[i + 3]=(data[i + 3] + data[i + 3 - 4] * m) / n;
}
}
然后把其色素塊進行復制回去即可。
其中每個像素占據一個字節，一個四個字節。
isPointInPath方法用來確定一個點是否落在當前路徑中。
即命中檢測。
命中檢測可以和鼠標事件相互轉化
但是坐標需要進行轉換。
TML5引入了十三種新的表單輸入，大大增加了Web設計人員和開發人員可以添加到表單中的不同字段的數量。這些新類型都需要瀏覽器來支持它們，并且吸收速度比我們所希望的要慢。2019年我們可能使用這些特性功能更為廣泛的有哪些呢？
對于許多設計人員和開發人員來說，HTML5的一個突出的標題功能是添加了許多可以使用的新類型的表單輸入。多年來，我們一直局限于使用單行文本輸入（type="text"）并使用JavaScript和用戶指令來嘗試通過一個簡單的字段準確地捕獲不同類型的有效數據。
HTML5帶來了type屬性的新值，使我們能夠更加具體地了解我們需要通過該字段捕獲的數據類型，并承諾瀏覽器將提供強制用戶進入所需的接口和驗證。準確地完成該領域。
從URL到電子郵件，從搜索字段到日期，希望不是需要編寫繁瑣的JavaScript來嘗試驗證這些字段，我們可以將它留給瀏覽器為我們做哪些艱苦的工作。更重要的是，通過添加它對用戶上下文（設備類型，交互類型，時區等）的了解，瀏覽器可以更好地定制界面以滿足用戶的需求。
1.搜索字段
該type="search"輸入旨在用于搜索字段。在功能上，這些與基本文本字段非常相似，但具有專用類型使瀏覽器能夠應用不同的樣式。如果用戶的操作系統具有搜索字段的設置樣式，則此功能特別有用，因為這使瀏覽器可以設置網頁上的搜索字段的樣式以匹配。規范說search和之間的差異text純粹是風格的，所以如果你打算用CSS重新設置字段，最好避免這種情況。它的使用似乎沒有語義上的優勢。
2.電話號碼字段
該type="tel"輸入用于輸入電話號碼。這些就像Whatsapp使用的唯一用戶名。如果你不確定，請問你的祖父母。在國際上，出于技術和本地化原因，電話號碼采用了許多不同的格式。因此，tel輸入不會嘗試驗證電話號碼的格式。可以使用關聯的驗證工具（如pattern標記上的屬性）或setCustomValidity() JavaScript方法來強制執行格式。
在桌面瀏覽器上，電話領域的使用似乎影響不大，但是，在具有虛擬鍵盤的設備上，它們非常有用。例如，在iOS上，在電話領域上的聚焦輸入會打開一個數字小鍵盤，準備用于鍵入數字。此外，設備的自動完成機制啟動并建議可以通過單擊自動填充的電話號碼。
3. URL字段
該type="url"字段可用于捕獲URL。例如，當要求用戶輸入其商業目錄的網站地址時，您可以使用此方法。關于URL字段的奇怪之處在于它只需要完整的絕對URL。例如，沒有選項只能捕獲域名或路徑，這確實限制了它在某些方面的實用性，因為CMS和Web應用程序開發人員會發現許多用于接受和驗證相對路徑的字段。
4.電子郵件字段
可能最常用的新選項之一是type="email"電子郵件地址，就像我們看到的電話號碼和URL一樣，帶有虛擬鍵盤的設備可以自定義鍵（包括@按鈕之類的東西）并從其聯系人數據庫啟用自動填充功能。
電子郵件地址通常看起來像是一種非常簡單的格式，但這些變化實際上使它們非常復雜。驗證電子郵件地址的天真嘗試可能會導致將完美的地址標記為無效，因此能夠依靠瀏覽器更復雜且經過良好測試的驗證方法來檢查格式是非常棒的。有用的是，multiple可以將該屬性添加到電子郵件字段以收集電子郵件地址列表。在這種情況下，列表中的每個電子郵件地址都是單獨驗證的。
5.數字字段
該type="number"字段是專為數值，瀏覽器支持很廣泛，虛擬鍵盤通常默認為數字輸入模式以鍵入值。
使用type="number"任何浮點數，因為它的廣泛的支持，可以幫助防止意外輸入。
6.范圍字段
type="range"可以被認為是type="number"用戶不關心確切值的替代方案的范圍字段取，會經常使用，同樣的min，max和step屬性作為多個字段，和瀏覽器幾乎普遍地展示本作為圖形滑塊，用戶不一定能夠看到他們設置的確切值。type="range"用途可能有點小，但支持很好，滑塊提供了一個用戶友好的輸入方法。
7.色域
該type="color"字段設計用于以十六進制表示法捕獲RGB顏色，例如#aabbcc。HTML規范將其稱為“顏色控制”，其目的是瀏覽器應提供某種用戶友好的顏色選擇器。
有些瀏覽器確實提供了這一功能，特別是Chrome和Firefox都提供了通過小色塊訪問系統顏色選擇器的功能。
8.日期字段
HTML5引入了許多不同的type值來創建日期和時間的輸入。這些措施包括date，time，datetime-local，month和week。
Firefox有一個非常出色的日期選擇器，Chrome和Edge也有相當不錯的界面。然而，在舊的IE中沒有支持，在Safari中沒有支持。
自HTML5規范成為推薦以來的四年中，瀏覽器領域發生了很大變化。對新型輸入的支持相當強勁 - 特別是在具有平板電腦和手機等虛擬鍵盤的移動設備中。在大多數情況下，這些輸入可以安全使用，并為用戶提供一些額外的實用程序。
有一些值得注意的例外，其中最糟糕的是日期和時間字段，他們不僅缺乏實用性，而且還有更多不完整瀏覽器支持功能。當支持不可用時，這些字段的后備模式很差。在這些情況下，最好堅持使用基于JavaScript的解決方案來逐步增強基本type="text"輸入字段。
?
端開發工程師實際上是負責IT系統工程的，實際上就是負責信息化系統的設計、建設，包括設備、系統、數據庫、應用系統的建設的。說白了，你前期就是個做網頁的，但是后期會慢慢變得越來越厲害，自己寫網站，做各種動畫游戲不再話下，喜歡哪個女生，分分鐘在網頁上給你畫出來花。會了這些害怕追不到妹子么?是不是很流弊?
等你進入公司后，一般來說都是這么分工的：
1.產品需求:
由產品經理給出需求文檔
2.項目設計:
視覺設計師-->PSD 設計圖
交互設計師-->對網站交互進行設計
3.前端開發:
HTML
iOS
Android
Unity-3D
4.后臺開發:
后臺人員配合
5.上線運營
需要注意，很多公司實際上把網站規劃這個工作也直接交給產品去做了，這實際上是不對的。而且像網站的交互設計師，很多公司都直接被省略了，而且最后的上線運營一般來說，跟咱們也沒什么關系。
那我接下來都要學習什么呢?
首先就是要學習各種開發工具的使用，例如各種瀏覽器的使用，熟悉各種瀏覽器的插件，明確各種瀏覽器之間的差異，并且還要掌握使用傳說中的《亞洲四大邪術》中的 中國PS 術。還需要掌握各種語言，例如 HTML ,CSS ,JS ,DOM ,BOM ,PHP ,Ajax ,Node.js等。
今天我們先來講講前端開發的核心語言。
前端開發的核心語言：
HTML : 超文本標記語言結構
CSS : 層疊樣式表表現
JS : 腳本語言行為
要是還是不懂，可以給大家舉個例子。
看見沒有，HTML , CSS 和 JS 三者實際上相互配合的，HTML 負責結構，CSS 負責樣式，JS 負責行為，例如我點擊了一下，這個色塊就變長了。
對了，剛才說這個里面用了這三者，那么什么是 HTML 呀?”
HTML其實就是超文本標記語言。
超越文本,可以包含圖片,鏈接,和一些其他的資源;
標記，是指特定的位置寫特定的內容(都寫過信吧，信封上讓你寫郵編的框框就是標記呦);
如何做標記?
<> </> 雙標記
</>單標記
標記語言，是給標記里面書寫"特定的"英文單詞,給這個標記賦予了特殊的意義，就是標記語言.
我們知道了什么是HTML之后，那我們如何去寫 HTML 呢?這個先不急，我們首先來認識一下，HTML 的基本結構。
大家也看到了，這樣寫出來的內容一點都不好看呀，那我們該如何去把這個東西變得更美觀一點呢?這當然要用到我們強大的 CSS 了，也就是層疊樣式表。
那我們該如何去把CSS應用到頁面中呢?直接寫么?當然不是，引入CSS的方式分為三種：內聯樣式表、內部樣式表、外部樣式表。像我們剛才使用的方式，就是“內聯樣式表”。
內聯樣式表的寫法:寫在標簽內部
優點:優先級最高
缺點:冗余代碼太多，不利于維護
使用場景:個別特殊效果的設置,平時不推薦使用
“內部樣式表”和“外部樣式表”他們都是需要寫在 <head> 標簽內部的。”
接下來我還需要給大家說說CSS選擇器了，你想要某一個東西發生改變，首先就需要讓它知道它自己需要改變。
CSS選擇器有三種選擇方式：
1.標簽名選擇器
2.類選擇器
3.ID 選擇器
現在大家應該明白該如何使用css選擇器了吧。
接下來我們再來學一下如何控制一些基本的樣式。首先是背景。
學習了背景設置之后再來學習邊框的設置。
之后我們還需要學習內邊距----padding。
有內自然有外，外邊距----margin。
學會了 padding，border，margin 就可以組成我們前端開發無往不利的《盒模型》啦。有沒有很開心啊.
盒模型
盒子占地的空間面積
寬： width + border-left + border-right + padding-left + padding-right;
高： height + border-top + border-bottom + padding-top + padding-bottom;
控制文字樣式的各種方法。”
本文鏈接：http://hn.lanou3g.com/lozx/2872.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
