H5学习语义化标签、canvas

一、语义化标签

1. <header></header>
   定义文档或者文档的一部分区域的页眉，应该作为介绍内容或者导航链接栏的容器

** header标签不能被放在 footer、address或者另一个 header元素内部 **

2. <footer></footer>
   定义文档或者文档的一部分区域的页脚，应该包含它所包含的元素的信息

3. <nav></nav>
   定义导航链接的部分

4. <article></article>
   定义独立的内容，例：论坛帖子、博客文章、新闻故事、评论

5. <section></section>
   定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域

6. <aside></aside>
   定义 article>标签外的内容，aside 的内容应该与附近的内容相关。

二、canvas

1.定义

定义图形，比如图表和其他图像，您必须使用脚本来绘制图形，通过脚本 (通常是JavaScript)来完成。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
//创建一个画布，宽高需要通过行间样式设置
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.moveTo(0,0);//路径从哪里开始
ctx.lineTo(100,0);//开始创建路径
ctx.lineTo(100,100);
ctx.closePath();//如果路径线是相连的，就闭合，只针对一次绘制
ctx.fill();//填充
ctx.lineWidth = 10;//路径粗细，如果需要不同粗细，则需要每次绘制
ctx.stroke();//绘制出通过 moveTo() 和 lineTo() 方法定义的路径

ctx.beginPath();//新路径开始
ctx.moveTo(250,0);
ctx.lineTo(350,0);
ctx.lineTo(350,100);
ctx.closePath();
ctx.lineWidth = 5;
ctx.stroke();

2.矩形

1. 原始方法

ctx.moveTo(50,0);
ctx.lineTo(150,0);
ctx.lineTo(150,100);
ctx.lineTo(50,100);
ctx.closePath();
ctx.fill()
ctx.stroke();

2. rect

ctx.rect(50,0,100,100);//初始x，初始y，宽，高
ctx.fill();
ctx.stroke();

3. strokeRect

ctx.strokeRect(50,0,100,100);

4. fillRect

ctx.fillRect(50,0,100,100);

3.矩形运动

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var height = 0;
var timer = setInterval(function(){
    ctx.clearRect(0,0,500,300);//每次清除前面绘制的图形
    ctx.strokeRect(100,height,50,50);
    height+=2
},1000/30);

4.圆形

arc（圆心x，圆心y，半径r，弧度Math.PI，方向0顺时针1逆时针）

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.arc(200,150,50,0,Math.PI*1.8,0);
ctx.lineTo(200,150);
ctx.closePath();//可以闭合
ctx.fill();//可填充
ctx.stroke();

ctx.arc(200,150,50,0,Math.PI*1.8,1);

5.圆角矩形

arcTo(起点x,起点y,目标x,目标y,弧度)，目标坐标只做参考，只要在目标线上任一点

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.moveTo(50,60);//60是最后一圈圆角拐回时减去10
ctx.arcTo(50,150,150,150,10);//从50,150,向150,150拐去,弧度为10
ctx.arcTo(150,150,150,50,10);
ctx.arcTo(150,50,50,50,10);
ctx.arcTo(50,50,50,150,10)
ctx.stroke();

6.贝塞尔曲线

1. 二次贝塞尔曲线
   

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50,50);
ctx.quadraticCurveTo(150,150,250,50);
ctx.stroke();

2. 三次布尔塞尔曲线
   

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50,50);
ctx.bezierCurveTo(150,150,250,50,350,150);
ctx.stroke();

7.平移缩放

1. 平移

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.translate(100,100);//将整个画布坐标系平移100,100
ctx.rotate(Math.PI/6);,//以画布远点为旋转中心
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.stroke();

2. 缩放

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.scale(2,2);//将整个画布坐标系放大
ctx.strokeRect(100,100,50,50);

8.sava和restore

平移和旋转等操作是全局的。

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.translate(100,100);
ctx.rotate(Math.PI/6);
ctx.strokeRect(0,50,50,50);

ctx.beginPath();
ctx.fillRect(100,50,50,50);

利用save和restore保存某个时间的画布状态，并后面恢复再绘制就可以避开该问题。

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.save();
ctx.beginPath();
ctx.translate(100,100);
ctx.rotate(Math.PI/6);
ctx.strokeRect(0,50,50,50);

ctx.restore();
ctx.beginPath();
ctx.fillRect(100,50,50,50);

9.背景填充

1. 纯色或图片
   图片以画布原点开始填充

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = './1.png';
img.onload = function(){//放置图片未加载完毕就开始绘制
    ctx.beginPath();
    ctx.translate(100,100);//图片以画布原点开始填充，要配合translate使用，所以save和restore也不可避免
    var bg = ctx.createPattern(img,'no-repeat');//将图片变成纹理
    ctx.fillStyle = bg;//可以填充颜色
    ctx.fillRect(0,0,200,100);
}

2. 线性渐变
   createLinearGradient(x0,y0,x1,y1)
   x0 渐变的开始圆的 x 坐标
   y0 渐变的开始圆的 y 坐标
   x1 渐变的结束圆的 x 坐标
   y1 渐变的结束圆的 y 坐标
   线性渐变以画布原点开始填充

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath(0);
var bg = ctx.createLinearGradient(0,0,200,0);//两点确定线性渐变方向
bg.addColorStop(0,'white');
bg.addColorStop(0.5,'green');
bg.addColorStop(1,'blue');//可设置多个点，只能从0-1
ctx.fillStyle = bg;
ctx.fillRect(0,0,200,100);

3. 辐射渐变
   createRadialGradient(x0,y0,r0,x1,y1,r1);
   x0 渐变的开始圆的 x 坐标
   y0 渐变的开始圆的 y 坐标
   r0 开始圆的半径
   x1 渐变的结束圆的 x 坐标
   y1 渐变的结束圆的 y 坐标
   r1 结束圆的半径

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath(0);
var bg = ctx.createRadialGradient(100,100,50,100,100,100);//利用不同圆心，不同半径，可以绘制不通效果
bg.addColorStop(0,'red');
bg.addColorStop(1,'green')
ctx.fillStyle = bg;
ctx.fillRect(0,0,200,200);

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath(0);
var bg = ctx.createRadialGradient(100,100,40,100,100,100);
bg.addColorStop(0,'white');
bg.addColorStop(0.5,'black');
bg.addColorStop(1,'white');
ctx.fillStyle = bg;
ctx.fillRect(0,0,200,200);

4.阴影

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.shadowColor = 'red';
ctx.shadowBlur = 30;
ctx.strokeRect(50,50,100,100);

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.shadowColor = 'red';
ctx.shadowBlur = 30;//阴影模糊范围
ctx.shadowOffsetX = 10;//偏移量
ctx.shadowOffsetY = 10;
ctx.fillRect(50,50,100,100);//填充的图形阴影效果更好

10.绘制文字

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeRect(50,50,100,100);
ctx.font = '36px Georgia';
ctx.strokeText('文字',200,50);//文字描边

ctx.fillStyle = 'green';//填充fill
ctx.fillText('渲染',200,150);//文字填充

11.线端样式

1. lineCap
   默认值为butt

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 12;
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineCap = 'round';
ctx.stroke();

ctx.lineCap = 'square';

2. lineJoin

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 12;
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(100,150)
ctx.lineJoin = 'round';
ctx.stroke();

ctx.lineJoin = 'bevel';

ctx.lineJoin = 'miter';//连接区域过长时，会自动缩减
ctx.miterLimit = 2;//可以自己定义缩减值，