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

魔王哪吒

关注

发布于: 2021 年 02 月 06 日

前言

哪吒人生信条：如果你所学的东西处于喜欢才会有强大的动力支撑。

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，2021加油！欢迎关注加我vx:xiaoda0423，欢迎点赞、收藏和评论

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

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

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

读者了解内容：

除了 HTML5 还有 css3 需要学习，css3 中有各种新增的样式和属性。

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

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

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

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

其实需要了解一下的，关于 HTML5

HTML5 的出现就连微软也为此下一代的ie9做了标准上的改进，就是为了能够支持html5。

HTML4 的代码示例：

<form>

document.getElementById("search").focus();

</script>

</form>

示例代码：

<form>

document.getElementById("search").focus();

</script>

</form>

HTML5 的示例：

<form>

<p><label>Search:<input name="search" autofocus></label></p>

</form>

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">

代码示例：

<input type="checkbox" checkbox>checkbox

<input type="checkbox">checkbox1

<input type="checkbox" checked="checked">checkbox2

<input type="checkbox" checked="">checkbox3

代码：

<input type="checkbox" checkbox>checkbox

<input type="checkbox">checkbox1

<input type="checkbox" checked="checked">checkbox2

<input type="checkbox" checked="">checkbox3

HTML5 标记示例：

<!DOCTYPE html>

<p>html5

<br/>html5

新增元素

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

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

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

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

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

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

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

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

效果：

</figure>

代码：

</figure>

video元素，定义视频。

audio元素，定义音频。

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

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

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

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

ruby元素，表示ruby注解。

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

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

wbr元素，表示软换行。

canvas元素，表示图形，比如图表和其他图像。

效果：

代码示例：

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

代码：

details元素，表示用户要求得到并且可以得到的细节信息。

web

</details>

代码：

web

</details>

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

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

keygen元素，表示生产密钥。

output元素，表示不同类型的输出，比如脚本的输出。

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

menu元素，表示菜单列表。

效果：

<menu>

</menu>

代码：

<menu>

</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>

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示例：

</header>

</footer>

</article>

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

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

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

代码：

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

footer元素可以作为其上层父级内容区块或是一个根区块的脚注。

代码：

<ul>

</ul>

</div>

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

## 表单与文件

### form 属性示例

</form>

示例代码：

</form>

### formaction 属性

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

### formmethod属性

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

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

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

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

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

代码：

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

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;

代码：

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画布的最左上角

代码示例：

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>

</head>

<body>

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(i25,i25,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>

</head>

<body>

点击

</button>

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+ys-100,dx+xs+100,dy+ys,dx+xs,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>

</head>

<body>

点击

</button>

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(i25,i25,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>

</head>

<body>

点击

</button>

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(i25,i25,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>

</head>

<body>

点击

</button>

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>

</head>

<body>

点击

</button>

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+xs,dy+ys);

}

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>

</head>

<body>

点击

</button>

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>

</head>

<body>

点击

</button>

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>

</head>

<body>

点击

</button>

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 权威指南》

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

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章

点赞、收藏和评论

我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)

我们下期见！

文章持续更新，可以微信搜一搜「 程序员哆啦 A 梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/#/ 已经收录

github收录，欢迎Star：https://github.com/webVueBlog/WebFamily

发布于: 2021 年 02 月 06 日阅读数: 57

原文链接:【http://xie.infoq.cn/article/f55ef7085894b854ea78502fa】。未经作者许可，禁止转载。

魔王哪吒

关注

微信搜：程序员哆啦A梦 2018.05.08 加入

面向JavaScript爱好人员提供：Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和经验分享。博客首发：http://www.dadaqianduan.cn/#/

发布

暂无评论

创作场景

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

前言

HTML5 的目的

HTML5

新增元素

`input`新增元素的类型

表单新增属性

HTML5 新增

Blob 对象

canvas 元素

`moveTo`和`lineTo`

贝济埃曲线

绘制渐变图形

绘制线性渐变

两点之间的线性渐变

定义用蓝色填充的矩形：

绘制径向渐变

绘制变形图形

坐标变换

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

矩阵变换

给图形绘制阴影

绘制图像

平铺效果

像素处理

绘制文字

保存与恢复状态

后记

点赞、收藏和评论

我们下期见！

魔王哪吒

评论