整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
責制定Web標準的World Wide Web Consortium (W3C)正式發表了HTML5.1推薦規格，規格定義了HTML語言第五大版本的第一個小版本。W3C已在著手制定下個版本HTML5.2。大部分瀏覽器已經實現或即將實現HTML5.1引入的新特性和變化。根據HTML5.1實現報告，Edge/IE在實現進展上要落在Chrome和Firefox后面。
下面給大家介紹下新功能。
1.HTMLFormElement.reportValidity()
如果元素的子控件滿足其驗證約束，HTMLFormElement.reportValidity（）方法將返回true。 返回Whenfalse時，對每個無效子項觸發可取消的無效事件，并將驗證問題報告給用戶。
句法（syntax）
HTMLFormElement.reportValidity()
例子：
document.forms["myform"].addEventListener('invalid', function() {
//Optional response here.
}, false);
document.forms["myform"].addEventListener('submit', function() {
document.forms["myform"].reportValidity();
}, false);
今天筆記本沒有電了，只能到這了，還有更多的看大家興趣了，大概列下：HTMLMediaElement.fastseek()
HTMLElement.forceSpellcheck()
<Input type="week">
<input type="month">
<input type="datetime-local">
ImageBitmap interface
<picture>
<img srcset="">
<details> and <summary>
<iframe allowfullscreen>
registerProtocolHandler()
<menu type="context">
<menuitem>
XMLDocument interface
Restore <a rev="">
著微信小程序的發布，前端開發也會慢慢火起來，對相關從業人員而言了解一些技術動向則十分必要。
大約兩年前，用于在 web 上構建和呈現內容的標記語言HTML 5發布。作為一個替代 HTML 4，XHTML 1 和 2級 DOM HTML 的語言，HTML 5 語言的改進使其能夠支持更高級的多媒體，如<video>, <audio> 和 <canvas>，同時保持HTML 是可讀的，并且能夠被計算機和設備所理解。除了為現有文件改善和合理化標記之外，HTML 還為復雜的web應用程序提供標記和API。經常與之拿來對比的則是Adobe的Flash，HTML 5 現如今已經成為主要的內容交付標準。在接下來的幾個月中，HTML 5將會更新升級到HTML 5.1。
HTML 5.1的標準已經得到了提升，從一個“候選發布版本”到一“提出建議”，再到成為一個“W3C推薦標準”之前的最后一步，HTML 5.1一致取代了HTML 5，并作為當前的HTML標準。你可以放心、安全的集成新功能，因為所有主要的瀏覽器廠商會在即將到來的新版本中實施該標準。
如果說HTML 5是一個開創性的發布，那么HTML 5.1則是通過一組添加，并同時取消過時的和舊的東西，進一步提高了HTML。
最明顯的是<picture>元素。
當集成在Chrome，Opera，Firefox，Safari和Edge中，<picture>標簽的介紹對這個元素重要性的一種確認。<picture>是一個用于指定多個<source>元素中其中一個明確的<IMG>元素的容器。瀏覽器會根據當前網頁的布局選擇合適的資源，以及它將顯示在哪種設備（例如，一個普通的或retina顯示器設備）上。對<picture>來說，一個比較方便的屬性是srcset屬性，這個屬性可以讓你在不同的場景下選擇圖片。
<picture>
<source srcset="designmodo-logo-wide.png" media="(min-width: 900px)">
<img src="designmodo-fallback.png" alt="DMD">
</picture>
顯然，HTML 5.1將會刪除一些元素。不像一些新聞資源引用<dialogue>增加到HTML 5.1，根據官方W3C的提議，實際上是要刪除該元素。其他已刪除的項包括：
· registerContentHandler(), isContentHandlerRegistered() 和 isProtocolHandlerRegistered()方法
· input元素的類型屬性的日期時間值
· 自動填充機制未實現部分
· label元素不再Reassociatable
· 菜單元素的工具欄類型
· InputMode屬性
雖然<dialog>被刪除了，還有一些標簽被建議刪除，但是在新的規范中依然是可用的，不過，這些標簽會被標記為“有風險”。這些元素可能會在HTML 5.2版本中被刪除，如果瀏覽器廠商不再支持它們的話。所以，使用元素注釋如<menu> 和 <menuitem>，或<keygen>標簽，暫時來講是一個好主意。
下個月HTML 5.1 將會成為標準。與此同時，W3C已經用于HTML 5.2。
補充一個很好的定義<meta name=”theme-color”>。如果你熟悉Vivaldi的話（Opera的前CEO Jon Stephenson von Tetzchner開發的一款瀏覽器），那你肯定喜歡它根據你所在的頁面適應UI欄顏色的方式，該功能可以讓開發者為網頁選擇一個主色，并在不同的UI場景中實現它。
從長遠來看，HTML將在以一種可預見但有趣的方式進化。核心詞匯和功能將會從以下4個主要方向延伸：
· 即將到來的規范如HTML 5.2
· 為適應不同規格的HTML5擴展或功能（參見SVG）
· 從原始的HTML5規范和標準單獨拆下模塊（參見Canvas,，通過腳本元素的繪制）
· 作為HTML5的擴展模塊
via/designmodo 編譯/DevStore齊劉海姑娘
原文地址：http://www.devstore.cn/new/newInfo/25668.html
fillStyle = color 設置圖形的填充顏色。
strokeStyle = color設 置圖形輪廓的顏色。
默認都是黑色的顏色和邊框
// 這些 fillStyle 的值均為 '橙色'
ctx.fillStyle ="orange";
ctx.fillStyle ="#FFA500";
ctx.fillStyle ="rgb(255,165,0)";
ctx.fillStyle ="rgba(255,165,0,1)";
通過for循環，利用i、j的漸變繪制漸變色
例子：functiondraw(){
var ctx = document.getElementById('canvas').getContext('2d');
for(var i=0;i<6;i++){
for(var j=0;j<6;j++){
ctx.fillStyle ='rgb('+ Math.floor(255-42.5*i)+','+
Math.floor(255-42.5*j)+',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}}
效果：
例：functiondraw(){
var ctx = document.getElementById('canvas').getContext('2d');
for(var i=0;i<6;i++){
for(var j=0;j<6;j++){
ctx.strokeStyle ='rgb(0,'+ Math.floor(255-42.5*i)+','+
Math.floor(255-42.5*j)+')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}
透明度 Transparency
// 指定透明顏色，用于描邊和填充樣式
ctx.strokeStyle ="rgba(255,0,0,0.5)";
ctx.fillStyle ="rgba(255,0,0,0.5)";
lineWidth = value設置線條寬度。
lineCap = type設置線條末端樣式。（butt默認，round圓角 和 square多出一個方塊效果）
lineJoin = type設定線條與線條間接合處的樣式。（round圓角,bevel角被磨平 和 miter直角。默認是 miter）
miterLimit = value限制當兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內角頂點到外角頂點的長度。
例子：通過設置線條寬帶漸增畫圖
functiondraw(){
var ctx = document.getElementById('canvas').getContext('2d');
for(var i =0; i <10; i++){
ctx.lineWidth =1+i;
ctx.beginPath();
ctx.moveTo(5+i*14,5);
ctx.lineTo(5+i*14,140);
ctx.stroke();
}}
效果：
createLinearGradient(x1, y1, x2, y2) createLinearGradient 方法接受 4 個參數，表示漸變的起點 (x1,y1) 與終點 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2) createRadialGradient 方法接受 6 個參數，前三個定義一個以 (x1,y1) 為原點，半徑為 r1 的圓，后三個參數則定義另一個以 (x2,y2) 為原點，半徑為 r2 的圓。
var lineargradient = ctx.createLinearGradient(0,0,150,150);var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
創建出 canvasGradient 對象后，我們就可以用 addColorStop 方法給它上色了。
gradient.addColorStop(position, color)
addColorStop 方法接受 2 個參數，position 參數必須是一個 0.0 與 1.0 之間的數值，表示漸變中顏色所在的相對位置。例如，0.5 表示顏色會出現在正中間。color 參數必須是一個有效的 CSS 顏色值（如 #FFF， rgba(0,0,0,1)，等等）。
你可以根據需要添加任意多個色標（color stops）。下面是最簡單的線性黑白漸變的例子。
var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');
createPattern(image, type)該方法接受兩個參數。Image 可以是一個 Image 對象的引用，或者另一個 canvas 對象。Type 必須是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
寫法：
var img =newImage();
img.src ='someimage.png';var ptrn = ctx.createPattern(img,'repeat');
案例：
functiondraw(){
var ctx = document.getElementById('canvas').getContext('2d');
// 創建新 image 對象，用作圖案
var img =newImage();
img.src ='images/wallpaper.png';
img.onload =function(){
// 創建圖案
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150);
}}
shadowOffsetX = float
shadowOffsetX和shadowOffsetY用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認都為 0。
shadowOffsetY = float
shadowOffsetX和 shadowOffsetY用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認都為 0。
shadowBlur = float
shadowBlur 用于設定陰影的模糊程度，其數值并不跟像素數量掛鉤，也不受變換矩陣的影響，默認為 0。
shadowColor = color
shadowColor 是標準的 CSS 顏色值，用于設定陰影顏色效果，默認是全透明的黑色。
例：文字陰影的例子
functiondraw(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX =2;
ctx.shadowOffsetY =2;
ctx.shadowBlur =2;
ctx.shadowColor ="rgba(0, 0, 0, 0.5)";
ctx.font ="20px Times New Roman";
ctx.fillStyle ="Black";
ctx.fillText("Sample String",5,30);
未完待續...
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
