責制定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小時內與您取得聯系。