整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
责制定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小时内与您取得联系。
