学习总结之HTML5剑指前端（建议收藏，图文并茂）

时间 2020-03-17

标签学习总结 html5 html 前端建议收藏图文并茂栏目 HTML5 繁體版

原文原文链接

前言

学习《HTML5与CSS3权威指南》这本书很不错，学完以后我很有感触，以为web的世界开明了许多。这本书是须要有必定基础的web前端开发工程师。javascript

这本书主要学习HTML5和css3，看看这本书的书名就知道了，首先学习HTML5中新增的语法与标记方法，新增的元素和api。css

读者了解内容：html

除了HTML5还有css3须要学习，css3中有各类新增的样式和属性。前端

这本书也要感谢做者以及工做人员。html5

这本书还有实例，使用HTML5中新增结构元素来构建网页，和使用HTML5+css3来构建web应用程序。java

从2010年开始HTML5地推出，受到了世界各大浏览器的热烈支持，在业界很受欢迎。那么你须要了解一下HTML5与以前版本的大体区别吗，须要了解为啥支持HTML5吗，答案是不太须要也能工做。css3

可是如，一份前端你能敲出代码，可是问题你懂得什么是cookie吗？也许你懂个大概，组长或者高管问你什么是cookie？有时候大部分人都是一头晕，不过，百度查一下就能知道答案。程序员

其实须要了解一下的，关于HTML5web

HTML5的出现就连微软也为此下一代的ie9作了标准上的改进，就是为了可以支持html5。canvas

HTML4的代码示例：

示例代码：

<form>
<p><label>用户名：<input name="search" type="text" id="search"></label></p>
<script type="text/javascript">
 document.getElementById("search").focus();
</script>
</form>
复制代码

HTML5的示例：

<form>
<p><label>Search:<input name="search" autofocus></label></p>
</form>
<div id="header">...</div>
<div id="nav">...</div>
<div class="arcticle">...</div>
<div id="side-bar">...</div>
<div id="footer">...</div>
复制代码

HTML5的目的

HTML5的出现就是为了可以创建更简单的web程序，让程序员编写更简单的HTML代码，HTML5提供了不少api，新的属性，新的元素等等，这样HTML5就有理由成为受欢迎的了。

在HTML5中代替Cookie的sessionStorage功能与globalStorage功能在ie8里得到了支持。

一个新版本的出现，不少人都会有疑问，担忧它会不会产生错误等。不过呢？它仍是有它火的理由。

兼容性
实用性
非革命性的发展

HTML5的出现解决了各类问题，这是一次比较强大的版本。

contentEditable属性，designMode属性，hidden属性，spellcheck属性，tabindex属性。

HTML5

内容类型ContentType仍是text/html

DOCTYPE声明，在HTML5中的DOCTYPE声明方法以下，不区分大小写：<!DOCTYPE html>

指定字符编码，HTML5：<meta charset="UTF-8">

<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">

代码示例：

checkbox checkbox1 checkbox2 checkbox3

代码：

<input type="checkbox" checkbox>checkbox
<input type="checkbox">checkbox1
<input type="checkbox" checked="checked">checkbox2
<input type="checkbox" checked="">checkbox3
复制代码

HTML5标记示例：

<!DOCTYPE html>
<meta charset="UTF-8">
<title>html5</title>
<p>html5
<br/>html5
复制代码

新增元素

section元素，表示页面中的一个内容区块。

article元素，表示页面中的一块与上下文不相关的独立内容。

aside元素，表示article元素的内容以外的，与article元素的内容相关的辅助信息。

header元素，表示页面中一个内容区块或整个页面的标题。

hgroup元素，用于对整个页面或页面中一个内容区块的标题进行组合。

footer元素，表示整个页面或页面中一个内容区块的脚注。

nav元素，表示页面中导航连接的部分。

figure元素，表示一段独立的流内容，通常表示文档主体流内容中的一个独立单元。

效果：

web

代码：

<figure>
<figcaption>web</figcaption>
<p>web</p>
</figure>
复制代码

video元素，定义视频。

audio元素，定义音频。

embed元素，用来插入各类多媒体。

mark元素，用来在视觉上向用户呈现那些须要突出显示或高亮显示的文字。

progress元素，表示运行中的进程。

time元素，表示日期或时间。

ruby元素，表示ruby注解。

rt元素，表示字符的解释或发音。

rp元素，表示在ruby注解中使用，以定义不支持ruby元素的浏览器所显示的内容。

wbr元素，表示软换行。

canvas元素，表示图形，好比图表和其余图像。

效果：

代码示例：

<canvas style="background-color: red;" id="myCanvas" width="100" height="100"></canvas>
复制代码

command元素，表示命令按钮，好比单选按钮，复选框或按钮。

代码：

<command onclick="cut()" label="cul">
复制代码

details元素，表示用户要求获得而且能够获得的细节信息。

html-详情

web

代码：

<details>
 <summary>html-详情</summary>
 web
</details>
复制代码

datalist元素，表示可选数据的列表

datagrid元素，表示可选数据的列表，它以树形的形式来显示。

keygen元素，表示生产密钥。

output元素，表示不一样类型的输出，好比脚本的输出。

source元素，表示用来为媒介元素定义媒介资源。

menu元素，表示菜单列表。

效果：

web

代码：

<menu>
 <li><input type="checkbox"/>web</li>
 <li><input type="checkbox"/>it</li>
</menu>
复制代码

`input`新增元素的类型

email表示必须输入E-mail地址的文本输入框。

url表示必须输入url地址的文本输入框。

number表示必须输入数值的文本输入框。

range表示必须输入必定范围内数字值的文本输入框。

Date Pickers

date-选取日，月，年

month-选取月，年

week-选取周和年

time-选取时间，日，月，年

datetime-选取时间，日，月，年

datetime-local-选取时间，日，月，年

html5已不支持frame框架，只支持iframe框架。

表单新增属性

multiple属性容许上传文件时一次上传多个文件。

为input元素，button元素，form元素增长了novalidate属性，该属性取消提交时进行的有关检查，表单能够被无条件地提交。

为ol元素添加reversed，表示列表倒序显示。

meta元素增长charset属性。

menu元素增长了两个新的属性——type与label。

为style元素增长scoped属性，用来规定样式的做用范围。

为script元素增长async属性，它定义脚本是否异步执行。

全局属性

contentEditable属性，功能是容许用户编辑元素中的内容，该元素是能够得到鼠标焦点的元素，并且在点击鼠标后，要向用户提供一个插入符号，提示用户该元素中的内容容许编辑。

除了contentEditable属性外，元素还具备一个isContentEditable属性，当元素可编辑时，该属性为true，当元素不可编辑时，该属性为false。

示例：

<ul contentEditable="true">
<li>元素1</li>
</ul>
复制代码

designMode属性，表示整个页面是否可编辑。使用JavaScript脚原本指定designMode属性的方法以下所示：document.designMode="on"。

hidden属性，全部的元素都容许使用一个hidden属性。该属性相似于input元素中的hidden元素，是用来不渲染该元素，让元素处于不可见状态。

spellcheck属性，是对用户输入的文本内容进行拼写和语法检查。spellcheck属性是一个布尔值的属性，具备true和false两种值。

tabindex属性，当不断敲击tab键让窗口或页面中的控件得到焦点，对窗口或页面中的全部控件进行遍历的时候，每个控件的tabindex表示该控件是第几个被访问到的。

HTML5新增

article元素，section元素，nav元素，aside元素，header元素，hgroup元素，footer元素，address元素。

article元素表明文档，页面或应用程序中独立的，完整的，能够独自被外部引用的内容。

article示例：

<article>
 <header>
  <h1>web</h1>
  <p>日期</p>
 </header>
 <footer>
  <p>web</p>
 </footer>
</article>
复制代码

aside元素用来表示当前页面或文章的附属信息部分。

time元素表明24小时中的某个时刻或某个日期，表示时刻时容许带时差。

pubdate属性是一个可选的，boolean值的属性，用于article元素中的time元素上。

代码：

<header><h1>页面标题</h1></header>
复制代码

hgroup元素是将标题以及其子标题进行分组的元素。

footer元素能够做为其上层父级内容区块或是一个根区块的脚注。

代码：

<div id="footer">
<ul>
 <li>web</li>
</ul>
</div>
复制代码

内容区块的编排，能够分“显示编排”与“隐式编排”两种方式。

表单与文件

form属性示例

示例代码：

<form id="testform">
 <input type="text">
 </form>
 <textarea form="testform"></textarea>
复制代码

formaction属性

formaction，增长不一样的此属性，可使得点击不一样的按钮，将表单提交到不一样的页面。

`formmethod`属性

每一个表单内也只有一个method属性来指统一指定提交方法。在HTML5中，可使用formation属性来对每一个表单元素分别指定不一样的提交页面，同时也可使用formmethod属性来对每一个表单元素分别指定不一样的提交方法。

placeholder是指当文本框处于未输入状态时显示的输入提示，autofocus属性自动获取光标焦点。

<input type="text" autofocus>
复制代码

autocomplete属性，辅助输入所用的自动完成功能。

input元素，search用于搜索，tel用于电话，url用于输入url格式，email用于输入email格式的文字，number用于数值输入文本框，range只容许输入一段范围内数值的文本框。color颜色选择文本框。file文本选择文本框。

代码：

<input name="url" type="url" value="http://www.microsoft.com">
<br/>
<input name="email" type="email" value="2397923107@qq.com">
<br/>
<input name="date"  type="date" value="2020-02-02">
<br/>
<input name="time" type="time" value="10:00">
<br/>
<input name="datetime" type="datetime">
<br/>
<input name="datetime-local" type="datetime-local">
<br/>
<input name="month" type="month" value="2010-10">
<br/>
<input name="week" type"week" value="2010-w40">
<br/>
<input name="number" type="number" value="23" min="10" max="100" step="5">
<br/>
<input name="range" type="range" value="30" min="0" max="100" step="5">
复制代码

output元素的追加，定义不一样类型的输出。

代码：

<input name="range1" type="range" min="0" max="100" step="5"/>
<output onforminput="value=range1.value">50</output>
复制代码

required属性，提示用户这个元素中必须输入内容。

pattern属性，要求输入内容符合必定的格式。

step属性控制元素中的值增长或者减小时的步幅。

显式验证，checkValidiity方法，调用该方法，显式地对表单内全部元素内容或单个元素内容进行有效性验证。

cite元素表示做品的标题。

file控件内只容许放置一个文件，multiple属性，file控件内容许一次放置多个文件。FileList对象为这些file对象的列表，表明用户选择的全部文件。

Blob对象

Blob对象表示二进制原始数据，它提供了一个slice方法。blob对象有两个属性，size属性表示一个blob对象的字节长度，type属性表示blob的mime类型。

blob对象使用示例

var file;
// 获得用户选择的第一个文件
file=document.getElementById("file").files[0];
var size = document.getElementById("size");
// 显示文件字节长度
size.innerHTML=file.size;
var type=document.getElementById("type");
// 显示文件类型
type.innerHTML=file.type;
复制代码

代码：

<input type="file" id="file" accept="image/*"/>
复制代码

FileReader接口主要用来把文件读入内存，而且读取文件中的数据。

if(typeof FileReader == 'undefined'){
    alert("web")
}else{
    var reader = new FileReader();
}
复制代码

支持拖动处理的mime的类型为如下几种：

text/plain:文本文字

text/html:HTML文字

text/xml：xml文字

text/uri-list:url列表，每一个url为一行。

canvas元素

canvas元素是很重要，能够画出图形与图像。

canvas元素指定id，width，height三个属性。

在body的属性中，使用了onload="draw('canvas');"语句，调用脚本文件中的draw函数进行图形描画。

用canvas元素绘制图形时。

取得canvas元素，用document.getElementById等方法取得canvas对象。
取得上下文，进行绘制图形时，须要使用图形上下文，它是一个封装不少绘图功能的对象，须要使用canvas对象的getContext方法来得到图形上下文。
填充和绘制边框，填充为fill，绘制边框stroke。填充表示填满图形内部，绘制边框是指只绘制图形的边框。
设定绘图样式，主要是用于图形的颜色，但不限于图形的颜色。第一，设定填充图形的样式，fillStyle属性，填充的样式，在该属性中填充的颜色值。第二，设定图形边框的样式，strokeStyle属性，图形边框的样式，在该属性中填入边框的颜色值。
指定线宽，使用图形上下文对象的lineWidth属性设置图形边框的宽度。在绘制图形的时候，任何直线均可以经过lineWidth属性来指定直线的宽度。
指定颜色值，填充颜色和边框的颜色分别经过fillStyle属性和strokeStyle属性。（rgb（红，绿，蓝）或rgba（红，绿，蓝，通明度））。
绘制矩形，使用fillRect方法和strokeRect方法来填充矩形和绘制矩形边框。

context.fillRect(x,y,width,height) context.strokeRect(x,y,width,height)

坐标原点为canvas画布的最左上角

代码示例：

<script>
function draw(id) {
    var canvas = document.getElementById(id);
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle="#EEEEFF";
    context.fillRect(0,0,400,300);
    context.fillStyle="red";
    context.strokeStyle="blue";
    context.lineWidth=1;
    context.fillRect(50,50,100,100);
    context.strokeRect(50,50,100,100);
}
</script>
复制代码

clearRect方法，该方法将擦除指定的矩形区域中的图形，让矩形区域中的颜色所有变为透明。

context.clearRect(x,y,width,height)

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>
<canvas id="canvasId"></canvas>
<script>
    var canvas = document.getElementById('canvasId');
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle="#EEEEFF";
    context.fillRect(0,0,400,300);
    var n = 0;
    for(var i=0;i<10;i++){
        context.beginPath();
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle = 'rgba(255,0,0,0.25)';
        context.fill();
    }
</script>

</body>
</html>
复制代码

图形绘制：

使用图形上下文对象的beginPath方法：context.beginPath()，这个方法不使用参数。调用这个方法，开始路径的建立。
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)建立圆形路径。

radius为原型半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。

arc方法能够用来绘制圆形，和绘制圆弧，开始角度与结束角度决定了弧度，anticlockwise参数为布尔值的参数。true按顺时绘制，false按逆时针方向绘制。

关闭路径，使用图形上下文对象的closePath方法将路径关闭。context.closePath()，这步操做只是路径建立完成而已，并无绘制任何图形。
绘制样式，context.fillStyle='rgba(255,0,0,0.25)';

`moveTo`和`lineTo`

moveTo方法的做用是将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点。moveTo(x,y)，x为横坐标，y为纵坐标。

lineTo方法在moveTo方法中指定的直线起点与参数中指定的直线终点绘制一条直线。

lineTo(x,y)，x表示直线终点的横坐标，y为直线终点的纵坐标。

贝济埃曲线

贝济埃曲线绘制使用bezierCurveTo方法

该方法的定义：

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

拥有6个参数。绘制贝济埃曲线须要两个控制点，cp1,cp2，x,y分别为曲线终点的横纵坐标。

绘制贝济埃曲线示例：

效果

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    点击
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle = '#EEEFF';
    context.fillRect(0,0,400,300);
    var n = 0;
    var dx = 150;
    var dy = 150;
    var s = 100;
    context.beginPath();
    context.globalCompositeOperation = 'and';
    context.fillStyle = 'rgb(100,255,100)';
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI / 15 * 11;
    context.moveTo(dx,dy);
    for(var i=0; i<30; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.bezierCurveTo(dx+x+s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
    }
    context.closePath();
    context.fill();
    context.stroke();
}

</script>

</body>
</html>
复制代码

使用quadraticCureTo方法绘制二次样条曲线。

context.quadraticCurveTo(in float cpx, in float cpy,in float x,in float y)。

二次样条曲线比绘制贝济埃曲线容易绘制，二次样条曲线须要两个控制点，贝济埃曲线只须要一个控制点。

绘制渐变图形

绘制线性渐变

fillStyle方法能够填充颜色外，还能够指定填充的对象。

渐变：指填充时从一种是颜色慢慢过渡到另一种颜色。

两点之间的线性渐变

context.createLinearGradient(xStart, yStart, xEnd, yEnd);

使用四个参数。

使用这个方法建立了一个使用两个坐标点的LinearGradient对象。使用addColorStop方法进行设定渐变的颜色。

context.addColorStop(offset, color);

offset的值是一个范围在0到1之间的浮点值，渐变起始点的偏移量为0，结束点为1。它为所设定的颜色离开渐变起始点的偏移量。

渐变，须要至少使用两次addColorStop方法以追加两个颜色。

HTML5 canvas fillRect() 方法

绘制 150*100 像素的已填充矩形：

fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);
复制代码

JavaScript 语法：

context.fillRect(x,y,width,height);

参数值

参数	描述
x	矩形左上角的 x 坐标
y	矩形左上角的 y 坐标
width	矩形的宽度，以像素计
height	矩形的高度，以像素计

HTML5 canvas createLinearGradient() 方法

定义从黑到白的渐变（从左向右），做为矩形的填充样式：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
复制代码

createLinearGradient() 方法建立线性的渐变对象。

JavaScript 语法：

context.createLinearGradient(x0,y0,x1,y1);

参数值

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

定义用蓝色填充的矩形：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
复制代码

渐变效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    点击
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    var g1 = context.createLinearGradient(0,0,0,300);
    g1.addColorStop(0,'rgb(255,255,0)');
    g1.addColorStop(1,'rgb(0,255,255)');
    context.fillStyle=g1;
    context.fillRect(0,0,400,300);
    var n = 0;
    var g2 = context.createLinearGradient(0,0,300,0);
    g2.addColorStop(0, 'rgba(0,0,255,0.5)');
    g2.addColorStop(1, 'rgba(255,0,0,0.5)');
    for(var i=0; i<10; i++){
        context.beginPath();
        context.fillStyle = g2;
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
        context.closePath();
        context.fill();
    }

}

</script>

</body>
</html>
复制代码

绘制径向渐变

径向渐变：指沿着圆形的半径向外进行扩散的渐变方式。

使用图形上下文对象的createRadiaGradient方法绘制。

context.createRadiaGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

须要使用6个参数。

参数	描述
xStart	渐变开始圆的圆心横坐标
yStart	渐变开始圆的圆心纵坐标
radiusStart	开始圆的半径
xEnd	渐变结束圆的圆心横坐标
yEnd	渐变结束原型纵坐标
radiusEnd	结束圆的半径

设定颜色也是使用addColorStop方法。同理的0到1之间的浮点数做为渐变转折点的偏移量。

绘制径向渐变效果：

使用createRadialGradient方法，使用addColorStop方法：

HTML5 canvas beginPath() 方法

在画布上绘制两条路径；红色和蓝色：

定义和用法

beginPath() 方法开始一条路径，或重置当前的路径。

开始一条路径，移动到位置 0,0。建立到达位置 300,150 的一条线：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
复制代码

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.lineWidth="5";//设置线段厚度的属性
ctx.strokeStyle="red"; // 红色路径
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 进行绘制

ctx.beginPath();
ctx.strokeStyle="blue"; // 蓝色路径
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // 进行绘制
复制代码

绘制径向渐变效果：

代码：（注意单词拼写）

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    点击
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    var g1 = context.createRadialGradient(400,0,0,400,0,400);
    g1.addColorStop(0.1,'rgb(255,255,0)');
    g1.addColorStop(0.3,'rgb(255,0,255)');
    g1.addColorStop(1,'rgb(0,255,255)');
    context.fillStyle=g1;
    context.fillRect(0,0,400,300);
    var n = 0;
    var g2 = context.createRadialGradient(250,250,0,250,250,300);
    g2.addColorStop(0.1,'rgba(255,0,0,0.5)');
    g2.addColorStop(0.7,'rgba(255,255,0,0.5)');
    g2.addColorStop(1,'rgba(0,0,255,0.5)');
    for(var i=0; i<10; i++){
        context.beginPath();
        context.fillStyle = g2;
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
        context.closePath();
        context.fill();
    }
}

</script>

</body>
</html>
复制代码

绘制变形图形

坐标变换

变形：使用Canvas API的坐标轴变换处理功能能够实现。

绘制图形，默认状况下，Canvas画布的最左上角对应的是坐标轴的原点。即为（0，0）。

对坐标进行处理，就能够实现图形的变形。

三种方式：

平移
扩大
旋转

平移：使用图形上下文对象的translate方法移动坐标轴原点。

方法：context.translate(x,y)，x,y为移动多少个单位。

扩大：使用图形上下文对象的scale方法将图形放大。

方法：context.scale(x,y)，x,y为该方向上放大倍数。

旋转：使用图形上下文对象的rotate方法将图形进行旋转。

方法：context.rotate(angle)，angle为旋转的角度，旋转为顺时针方向，逆时针须要将参数设置为负数。

坐标变换示例：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    点击
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle = '#EEEEFF';
    context.fillRect(0,0,400,300);
    // 图形绘制
    context.translate(200,50);
    context.fillStyle='rgba(255,0,0,0.25)';
    for(var i=0; i<50; i++){
        context.translate(25,50);
        context.scale(0.95,0.95);
        context.rotate(Math.PI/10);
        context.fillRect(0,0,100,50);   
    }
    
}

</script>

</body>
</html>
复制代码

对使用路径绘制出来的图像进行变形

学习translate,scale,rotate方法。

效果：将坐标变换和路径结合使用

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    点击
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.fillStyle = '#EEEEFF';
    context.fillRect(0,0,400,300);
    // 图形绘制
    context.translate(200,50);
    for(var i=0; i<50; i++){
        context.translate(25,50);
        context.scale(0.95,0.95);
        context.rotate(Math.PI/10);
        create5Star(context);
        context.fill();
    }
    
}
function create5Star(context){
    var n = 0;
    var dx=100;
    var dy=0;
    var s=50;
    context.beginPath();
    context.fillStyle='rgba(255,0,0,0.5)';
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig =Math.PI/5*4;
    for(var i=0;i<5;i++){
        var x =Math.sin(i*dig);
        var y =Math.cos(i*dig);
        context.lineTo(dx+x*s,dy+y*s);
    }
    context.closePath();
}

</script>

</body>
</html>
复制代码

矩阵变换

利用矩阵变换实现的变形技术

使用图形上下文对象的transforms方法修改变换矩阵

context.transform(m11, m12, m21, m22, dx, dy)

参数	描述
dx	将坐标原点在x轴上向右移动x个单位
dy	将坐标原点在y轴上向下移动y个单位

矩阵方法须要从新找文档进行深刻学习。以前的图形变形提到的三个方法，其实是隐式地修改了变换矩阵。

下面可使用transform方法进行代替：translate(x,y),scale(x,y),rotate(angle)。

用transform方法实现变形的示例

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    点击
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    var colors = ["red","orange","yellow","green","blue","navy","purple"];
    context.lineWidth = 10;
    context.transform(1,0,0,1,100,0)
    for(var i=0;i<colors.length;i++){
        context.transform(1,0,0,1,0,10);
        context.strokeStyle=colors[i];
        context.beginPath();
        context.arc(50,100,100,0,Math.PI,true);
        context.stroke();
    }
}


</script>

</body>
</html>
复制代码

使用setTransform方法：

context.setTransform(m11, m12, m21, m22, dx, dy)

绘制变形图形的示例：

HTML 5 canvas strokeStyle 属性

绘制一个矩形。请用蓝色的笔触颜色：

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
复制代码

绘制一个矩形。使用渐变笔触：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
复制代码

HTML5 canvas strokeRect() 方法

绘制 150*100 像素的矩形：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);
复制代码

效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    点击
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    context.strokeStyle = "red";
    context.strokeRect(30,10,60,20);
    var rad = 45*Math.PI/180;
    context.setTransform(Math.cos(rad),Math.sin(rad),-Math.sin(rad),Math.cos(rad),0,0);
    context.strokeStyle = "blue";
    context.strokeRect(30,10,60,20);
    context.setTransform(2.5,0,0,2.5,0,0);
    context.strokeStyle = "green";
    context.strokeRect(30,10,60,20);
    context.setTransform(1,0,0,1,40,80);
    context.strokeStyle = 'gray';
    context.strokeRect(30,10,60,20);
}


</script>

</body>
</html>
复制代码

在h5中，只要使用图形上下文对象的globalCompositeOperation属性就能决定图形的组合方式：

context.globalCompositeOperation=type

type的值：

source-over默认值，表示新图形覆盖在原有的图形之上。
destination-over，表示在原有图形之下绘制新图形。
source-in新图形与原有图形做in运算，只显示新图形中与原有图形相重叠的部分，新图形与原有图形的其余部分均变成透明。
destination-in，原有图形与新图形做in运算，只显示原有图形中与新图形重叠的部分，新图形与原有图形的其余部分均变成透明。
source-out新图形与原有图形做out运算，只显示新图形中与原有图形不重叠的部分，新图形与原有图形的其余部分均变成透明。
destination-out原有图形与新图形做out运算，只显示原有图形中与新图形不重叠的部分，新图形与原有图形的其余部分均变成透明。
source-atop只绘制新图形中与原有图形重叠的部分与未重叠覆盖的原有图形，新图形的其余部分变成透明。
destination-atop只绘制原有图形中被新图形重叠覆盖的部分与新图形的其余部分，原有图形中的其余部分变成透明，不绘制新图形中与原有图形相重叠的部分。
lighter原有图形与新图形均绘制，重叠部分作加色处理。
xor只绘制新图形中与原有图形不重叠的部分，重叠部分变成透明。
copy只绘制新图形，原有图形中未与新图形重叠的部分变成透明。

图形组合示例效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>1</title>
</head>
<body>


<button onclick="draw()">
    点击
</button>

<canvas id="can"> </canvas>

<script>

function draw(){
    var canvas = document.getElementById('can')
    if(canvas == null){
        return false;
    }
    var context = canvas.getContext('2d');
    var oprtns = new Array(
        "source-atop",
        "source-in",
        "source-out",
        "source-over",
        "destination-atop",
        "destination-in",
        "destination-out",
        "destination-over",
        "lighter",
        "copy",
        "xor"
    );
    i=8;
    context.fillStyle = "blue";
    context.fillRect(10,10,60,60);
    context.globalCompositeOperation = oprtns[i];
    context.beginPath();
    context.fillStyle = "red";
    context.arc(60,60,30,0,Math.PI*2,false);
    context.fill();
}


</script>

</body>
</html>
复制代码

给图形绘制阴影

利用图形上下文对象的属性：

shadowOffsetX-阴影的横向位移量
shadowOffsetY-阴影的纵向位移量
shadowColor阴影的颜色
shadowBlur阴影的模糊范围

绘制图像

使用drawImage方法，绘制图像：

context.drawImage(image,x,y)
context.drawImage(image,x,y,w,h);
context.drawImage(image,sx,sy,sh,dx,dy,dw,dh)

平铺效果

createPattern方法：

context.createPattern(image,type)

参数	描述
image	要平铺的图像
type	参数的值`no-repeat`，`repeat-x`，`repeat-y`，`repeat`

no-repeat不平铺
repeat-x橫方向平铺
repeat-y纵方向平铺
repeat全方向平铺

像素处理

使用图形上下文对象的getImageData方法来获取图像中的像素：

var imagedata = context.getImageData(sx,sy,sw,sh)

在HTML5中：绘制文字

绘制文字

使用fillText方法或者strokeText方法：

fillText方法用来填充方式绘制字符串：

void fillText(text,x,y,[maxWidth]);

strokeText方法用轮廓方式绘制字符串：

void stroke Text(text, x, y, [maxWidth]);

使用measureText方法来获得文字的宽度：

metrics = context.measureText(text)

保存与恢复状态

使用Canvas API中的save和restore两个方法。

保存文件，在Canvas API中保存文件的原理其实是把当前的绘画状态输出到一个data URL地址所指向的数据中的过程。为data URL，是目前大多数浏览器可以识别的一种base64位编码的URL。

主要用于小型的，能够在网页中嵌入的，不须要从外部文件嵌入的数据。

使用toDataURL方法把绘画状态输出到一个data URL中，而后从新装载。

toDataURL的使用方法：

canvas.toDataURL(type)

后记

阅读文章：

《HTML5与CSS3权威指南》

拉你进技术群，长期交流学习...
欢迎关注，认真学前端，作个有专业的技术人...

扫码关注公众号，订阅更多精彩内容。

学习总结之HTML5剑指前端（建议收藏，图文并茂）

前言

HTML5的目的

HTML5

新增元素

input新增元素的类型

表单新增属性

HTML5新增

表单与文件

form属性示例

formaction属性

formmethod属性

Blob对象

canvas元素

moveTo和lineTo

贝济埃曲线

绘制渐变图形

绘制线性渐变

两点之间的线性渐变

定义用蓝色填充的矩形：

绘制径向渐变

绘制变形图形

坐标变换

对使用路径绘制出来的图像进行变形

矩阵变换

给图形绘制阴影

绘制图像

平铺效果

像素处理

绘制文字

保存与恢复状态

后记

`input`新增元素的类型

`formmethod`属性

`moveTo`和`lineTo`