目录
前言
canvas是H5中最受欢迎的功能，这个元素负责在页面中设定一个区域，然后就可以通过JS动态地在这个区域中绘制图形，甚至可以制作简单的动画。canvas元素最早由苹果公司推出，当时主要用在Dashboard微件中，很快H5加入了这个元素，主要浏览器也迅速开始支持它。
一、Canvas的基本用法
<canvas id="app" width="400" height="400">浏览器不支持canvas</canvas>,由于一些老的浏览器不支持canvas，不支持的浏览器会执行 ‘浏览器不支持canvas’ ，支持的浏览器会渲染js中的 代码。
width 设定绘图区域的宽
height 设定绘图区域的高
toDataURL() 使用该方法可以导出在canvas元素上绘制的图像，这个方法接受一个参数，为图像的MIME类型格式，而且适用于创建图像的任何上下文。
用canvas元素绘制图形时，需要经过几道步骤：
1) 取得canvas对象
通过document.getElementById()等方法取得canvas对象。
2) 取得上下文*(context)
图形上下文是一个封装了很多绘图功能的对象。参数只能为”2d“
var context = one.getContext("2d");
3) 填充与绘制边框
使用canvas元素绘制图形的时候，有两种方式：填充与绘制边框。填充是指填满图形内部；绘制边框是指不填充图形的内部，只绘制图形的边框。canvas元素结合使用者两种方式来绘制图形。
4) 设定绘图样式
在进行图形绘制的时候，首先要设定好绘图的样式，然后调用有关方法进行图形的绘制，所谓绘图的样式，主要是针对图形的颜色而言的。但不仅限于图形的颜色。
fillStyle 填充的样式
strokeStyle 图形边框的样式
5) 指定线宽
使用图形上下文对象lineWidth属性设置图形边框的宽度。
6) 绘制矩形
分别使用fileRect方法与strokeReck方法来填充矩形和绘制矩形边框
context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);
二、绘制图像
1.绘制线段
beginPath(),开始绘制图形。
moveTo(),绘制开始的起点，用坐标表示。
lineTo(),绘制途中的落点，用坐标表示。
closePath(),闭合图形。
stroke(),绘制图形，之前是找点，运用这条语句将点连起来。
lineWidth 可以设置线宽。
stroke(),绘制边框图形。 strokeStyle，设置边框的样式。
fill(),绘制填充图形。 fillStyle，设置填充的样式。
fillRect(),绘制填充矩形。 strokeRect(),绘制边框矩形。
arc(),绘制圆形。
ellipse(),绘制椭圆。
createLinearGradient(),绘制渐变。
fillText() strokeText() 设置文本。
下面演示一下：
<canvas id="app" width="500" height="500"></canvas>
<script>
//1 获取canvas画布
var app = document.querySelector('canvas');
//2 获取上下文对象
var context = app.getContext('2d');
//3 绘制
//3.1 设置绘制的样式
context.strokeStyle = 'orange';
//绘制线段
//开始绘制
context.beginPath();
//起点
context.moveTo(50,50);
//落点
context.lineTo(200,50);
//绘制路径
context.stroke();
context.beginPath();
context.lineTo(50,100);
context.lineTo(200,100);
context.closePath();
context.stroke();
</script>
绘制线段的起点和落点没有分的太清楚，一直使用lineTo()也可以，也会绘制出图形，画线段可以不闭合图形，上面那条线段没有闭合，下面那条线段闭合了，没有太大的区别。
在绘制完一个图形，开始绘制另一个图形时，必须要写beginPath(),重新开始绘制，否则会有一条线将两个图形连起来。就像下面这张图一样：
2.绘制三角形
//在html代码中设置一块画布
//1 获取canvas画布
//2 获取画笔 上下文对象
//3 绘制
context.beginPath();
//画三角形需要三个点
context.moveTo(200,100);
context.lineTo(250,200);
context.lineTo(150,200);
//边框三角形样式
context.strokeStyle = 'teal';
//设置线宽 像素
context.lineWidth = '5';
//闭合线路，画三角行必须要闭合
context.closePath();
context.stroke();
//填充三角形样式
context.beginPath();
context.lineTo(200,210);
context.lineTo(250,310);
context.lineTo(150,310);
//设置颜色 填充颜色
context.fillStyle = 'teal';
//闭合线路
context.closePath();
//绘制图形， 填充的样式
context.fill();
绘制三角形，找到三个点的坐标，运用closePath（）语句闭合图形，会自动将三个点连接起来，学会绘制三角形，就能绘制多边形，只要找准每个点的坐标值。
3.绘制矩形
fillRect(x轴坐标,y轴坐标，长，宽)，第一二个点是左上角那个点的坐标位置。
//3.1 设置绘制的样式
context.fillStyle = 'teal';
context.strokeStyle = 'orange';
//3.2 执行绘制 fillRect(x轴坐标,y轴坐标，长，宽)
//填充样式
context.fillRect(10,10,100,100);
//边框矩形
context.strokeRect(10,120,300,100);
4.绘制圆形
arc(圆心的x轴，圆心的y轴，半径，开始的弧度，结束的弧度，顺时针或逆时针旋转 Boolean类型顺时针为true----逆时针为false-----默认为true)
//3 绘制
//3.1 设置绘制的样式
context.fillStyle = 'teal';
context.strokeStyle = 'orange';
//3.2 执行绘制 填充圆形
context.beginPath();
//arc(圆心的x轴，圆心的y轴，半径，开始的弧度，结束的弧度，顺时针或逆时针旋转)
context.arc(200,100,50,0,Math.PI*2);
context.fill();
//边框形式
context.beginPath();
context.arc(150,150,100,Math.PI/3,Math.PI*2/3);
context.stroke();
5.绘制椭圆
ellipse(起点x，起点y，长轴（短轴），短轴（长轴），图像旋转角度，起始角，结束角)
//3 绘制
//3.1 设置绘制的样式
context.fillStyle = 'teal';
context.strokeStyle = 'orange';
//绘制椭圆
//ellipse(起点x，起点y，长轴（短轴），短轴（长轴），图像旋转角度，起始角，结束角)
context.ellipse(230,160,80,100,10,Math.PI*2,0);
//填充椭圆
context.fill();
//边框椭圆
// context.stroke();
6.绘制渐变效果
createLinearGradient(xstart,ystart,xend,yend)
xstart 渐变起点横坐标
ystart 渐变起点纵坐标
xend 渐变终点横坐标
yend 渐变终点纵坐标
addColorStop(0,'teal');
第一个参数为所设定的颜色离开渐变起点的偏移量，该参数的值是一个范围在0~1之间的浮点值，渐变起始点的偏移量为0，渐变的结束点的偏移量为1。
第二个参数为绘制时使用的颜色。
由于是渐变，所以至少需要使用两次addColorStop方法以追加两个颜色(开始颜色和结束颜色)
//填充样式
//开始绘制
context.beginPath();
//线性渐变效果
//createLinearGradient(xstart,ystart,xend,yend)
var grad = context.createLinearGradient(10,10,300,300);
grad.addColorStop(0,'teal');
grad.addColorStop(1,'orange');
context.fillStyle = grad;
context.fillRect(10,10,300,100);
径向渐变：
径向渐变是指沿着圆形的半径方向向外进行扩展的渐变方式。
context.createRadialGradient(xstart,ystart,radiusStart,xend,yend,radiusend)
前三个参数：圆的原心(x,y)，以及半径
后三个参数：终点圆的原心(x,y)，以及半径
如果想从某个形状的中心点开始创建一个向外扩散的径向渐变的效果，就要将两个圆定义为同心圆。
7.绘制文本
设置文字字体
顺序：style variant weight size family
font-style:
规定字体样式。可能的值：normal，italic，oblique
font-variant:
规定字体变体。可能的值：normal，small-caps
font-weight
规定字体的粗细。可能的值：normal，bold，bolder，lighter，100~900
font-size / line-height
规定字号和行高，以像素计。
font-family
规定字体系列
serif 中文翻译为“衬线字体族”,具有末端加粗、扩张或尖细末端，或以实际的衬线结尾的一类字体。
sans-serif 中文翻译为“无衬线字体族”。sans-serif 字体比较圆滑，线条粗线均匀，适合做艺术字、标题等
cursive 中文翻译为“手写字体族”。顾名思义，这类字体的字就像手写的一样。
fantasy 中文翻译为“梦幻字体族”。fantasy主要用在图片中，字体看起来很艺术，实际网页上用得不多。
monospace 中文翻译为“等宽字体族”。我们知道英文中各字母是不等宽的，但用 monospace，各个字母就是等宽的了，就可以像中文一样排版了。
//文本样式
context.font = '100px fantasy';
//填充样式
context.fillText('Canvas',10,100);
//边框样式
context.strokeText('Canvas',10,200);
8.绘制贝济埃曲线
quadraticCurveTo(cx,cy,x,y)
从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy作为控制点)
bezierCurveTo(c1x,c1y,c2x,c2y,x,y)
从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点
context.strokeStyle = 'orange';
context.bezierCurveTo(10,10,100,150,200,30);
context.stroke(); 
9.其他
绘制变形图形
1. 坐标变换
绘制图形的时候，我们可能经常会想要旋转图形，或者对图形进行变形处理，使用Canvas API的坐标轴变换处理功能，可以实现这种效果。
（1）. 平移 context.translate(x,y)
参数x为坐标原点向右移动的单位，参数y为坐标原点向下移动的单位。
（2）. 扩大 context.scale(x,y)
参数x为水平方向的放大倍数，参数y为垂直方向放大的倍数，如果是缩小，将这两个参数设为0到1之间的数就可以了。
（3）. 旋转 rotate(angle)
angle是指旋转的角度，旋转的中心点是坐标轴的原点，旋转是以顺时针方向进行的，要想逆时针旋转时，将angle设定为负数即可。
（4）. 状态的保存与恢复 save()
保存当前的绘图状态，save方法保存的绘图状态不仅包括当前坐标系统的状态，也包括CanvasRenderingContext2D所设置的填充风格，线条风格，阴影风格的各种绘图状态，但是save()方法不会保存当前Canvas上绘制的图形。
restore() 恢复之前保存的绘图状态。
矩阵变换等
总结
介绍了canvas的一些基础用法。canvas是HTML的一个比较有趣的标签，还可以操作图片，它甚至可以做一些简单的动画，像钟表之类的，感兴趣的朋友可以自己尝试。
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
