前端学习笔记一：html（8）html5前瞻+canvas画布
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 中的一些新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
然后就是HTML5的新内容讲解，这次讲的是canvas画布：
依照HTML笔记的管理还是先上代码，同时为了排版分成了两部分：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>canvas画布title>
head>
<style type="text/css">
#myCanvas{
border: #000000 solid 2px ;
}
style>
<body>
<canvas id="myCanvas" width="800px" height="900px" >这个落后的浏览器不能canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas"); // 获取画布元素
var ctx = c.getContext("2d"); // 创建context对象
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
ctx.fillStyle = "#00BFFF"; // 设置填充颜色，
ctx.fillRect(200, 61.25, 200, 200); // 建立一个填充的矩形
// 参数依次为原点（矩形左上角）x坐标，y坐标，宽，高
ctx.strokeStyle = "#47ba98"; // 设置描边颜色
ctx.strokeRect(500, 111.25, 100, 100); // 建立一个未填充的矩形
/*
在canvas标签里默认形状只有矩形，若是要画出一个线条或者任意其它图形，则需要使用“路径”元素：
路径是图形的基本元素。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
一个路径，甚至一个子路径，都是闭合的。
使用路径绘制图形需要一些额外的步骤：
创建路径起始点
调用绘制方法去绘制出路径
把路径封闭
一旦路径生成，通过描边或填充路径区域来渲染图形。
*/
ctx.strokeStyle = "#4169E1";
ctx.beginPath(); // 新建路径
ctx.moveTo(280, 700); // 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
ctx.lineTo(700, 320); // 绘制一条直线
ctx.closePath(); // 闭合路径之后，图形绘制命令又重新指向到上下文中
ctx.stroke(); // 通过线条通过的路径来绘制图形轮廓
ctx.strokeStyle = "#008000";
ctx.beginPath();
ctx.arc(400, 500, 150, 0, 2*Math.PI); // 绘制圆弧，参数分别为圆心的x，y坐标，半径，开始弧度，结束弧度
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#2D9CE1";
ctx.strokeStyle = "#8DE34B";
// 要绘制文字或者文本时，要使用到其它的属性和方法：
ctx.font = "40px Arial" // 定义一个字体，属性为大小和样式
ctx.fillText("你好h5！", 50, 350, 300); // 在 canvas 上绘制实心的文本
ctx.strokeText("你好h5！", 50, 400, 300);// 在 canvas 上绘制空心的文本
script>
body>
html>
运行结果：
第二部分：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title>
head>
<body>
运行结果：
由于开始接触JavaScript了，可以在代码里放注释了，因此以后不单独讲解知识点了。
大概只会列个表格列举一下新标签和新属性：
| Tag | 描述 | 常用元素 |
|---|---|---|
|
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 | id, height, width |