1.基础内容：
1.定义：<canvas> 标签定义图形， 用于图形的绘制，比如图表和其他图像，必须使用脚本(JavaScript)来绘制图形。
2.用途：可以在Canvas上画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。
3. 一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
①默认情况下 <canvas> 元素没有边框和内容。
<canvas id="myCanvas" width="200" height="100"></canvas>②注意: 标签通常需要指定一个id属性， width 和 height 属性定义的画布的大小。
③可以在HTML页面中使用多个 <canvas> 元素.
使用 style 属性来添加边框:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>2.绘制图像：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body >
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c=document.getElementById("myCanvas");//找到 <canvas> 元素
var ctx=c.getContext("2d");//创建 context 对象,getContext("2d")对象是内建的HTML5
对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
ctx.fillStyle="#FF0000";//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默
认设置是#000000（黑色）。
ctx.fillRect(0,0,150,75);//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
</script>
</body>
</html>结果展示：
ctx.fillRect(0,0,150,75);canvas 是一个二维网格，canvas 的左上角坐标为 (0,0)，fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
3.路径：
（1）在Canvas上画线，有两种方法：
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body >
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>结果展示：
意思是：定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条。
4.绘制圆形：
arc(x,y,r,start,stop)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body >
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>结果展示：
5.文本：
使用 canvas 绘制文本，属性和方法如下：
- font ------定义字体
- fillText(text,x,y) ---------------在 canvas 上绘制实心的文本
- strokeText(text,x,y) ----------在 canvas 上绘制空心的文本
使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);结果展示：
6.渐变：
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
有两种方式来设置Canvas渐变：
- createLinearGradient(x,y,x1,y1) --------------创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) -------- 创建一个径向/圆渐变
使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;//设置fillStyle的值为渐变
ctx.fillRect(10,10,150,80);//绘制图形结果展示：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);结果展示：
7.图像：
把一幅图像放置到画布上, 使用以下方法:
- drawImage(image,x,y)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="images/1.jpg" width="200" height="100">
<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>结果展示：
8.其他：
ctx.fillRect(x,y,w,h)：填充矩形
ctx.strokeRect(x,y,w,h)：带边框的矩形
ctx.clearRect(0,0,width,height)：清除整个画布
注意原点的位置
ctx.fillStyle：填充形状的样式
ctx.strokeStyle：描边的样式
ctx.lineWidth：线的宽度
ctx.lineCap：线帽
ctx.moveTo(x;y)：将画笔抬起点到x，y处
ctx.lineTo(x,y)：将画笔移到x，y处
ctx.rect(x,y,w,h)
ctx.arc(x,y,blur,star,end,boolean)//圆
ctx.arcTo(x1,y1,x2,y2,r)：2个坐标，一个半径
ctx.beginpath()：开始新路径
ctx.closepath()：闭合路径
ctx.save()
将画布保存当前状态
ctx.restore()
返回上一级状态
ctx.translate(x,y):将原点按当前坐标轴位移x，y个单位文本垂直居中
ctx.textBaseline = 'middle'; // top / bottom
文本水平居中
ctx.textAlign ='center'; // left // right
