5.1.1 在页面中添加canvas元素
新建h5文档，输入
<canvas id="myCanvsas" widht ="200" height="100></canvas> //指定一块画布，要加入id以便在脚本中进行控制显示需要的图形
可用css控制画布的样式，设置边框1px

5.1.2 Canvas如何绘制图形
canvas对象本身是用来定义画布，
绘制图形的步骤，添加canvas，要有id值，再添加script，在脚本中绘制
<canvas id="myCanvsas" widht ="200" height="100></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas"); //获取画布
var context=c.getContext("2d"); //调用，指定参数是2d环境，getcontext是返回一个内建的对象，用这个对象来绘图
context.fillStyle="#ff00ff";  //指定绘制图形的填充色
context.fillRect(50,25,100,50); //指定绘制矩形的位置和尺寸，前面是坐标点，后面是宽和高
</script>

5.1.3 认识Canvas坐标
上讲中的context.fillRect(50,25,100,50); 50，25是x,y坐标，相对与画布左上角来说的，x向右，y向下

5.1.4 何时不用Canvas
canvas有强大的绘图功能，还能实现一些动画效果，但canvas占用资源很大
能用其它的与背景图像实现就不要用canvas，如渲染标签

5.1.5 如果浏览器不支持Canvas
有些浏览器不支持canvas元素，对不支持的浏览器提供替代方案
对不支持的显示一个标签，显示不支持的提示文本
<canvas id="myCanvsas" widht ="200" height="100>你的浏览器不支持</canvas>

5.1.6 检测浏览器支持
<script type="text/javascript">
var canvas= document.getElementById("myCanvas"); //获取画布
if (canvas.getContext) { //判断存不存在getContext这个对象，只要浏览器支持就有这个对象
 alert("你的浏览器支持Canvas!"); //也可以在这是绘图，因为支持
} else {
 alert("你的浏览器不支持Canvas!");
}
</script>

5.2.1 绘制直线
可以用js来实现
<canvas id="myCanvsas" widht ="200" height="100>你是浏览器不支持</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas"); //获取画布
var context=c.getContext("2d"); //调用，指定参数是2d环境，getcontext是返回一个内建的对象，用这个对象来绘图
context.moveTo(0,0); //在context对象上调用moveTo方法，从0,0坐标点开始，定义移动起点 moeTo用来建立一个新的子路径
context.lineTo(200,100);  //移动到200,100坐标处，没有moveto，lineTo也可用
context.stroke();  //调用stroke()方法，沿该路径绘制一条址线，
</script>

5.2.2 绘制矩形
 <canvas id="myCanvsas" widht ="200" height="100></canvas>
 <script type="text/javascript">
 var c = document.getElementById("myCanvas"); //获取画布
 var context=c.getContext("2d"); //调用，指定参数是2d环境，getcontext是返回一个内建的对象，用这个对象来绘图
 context.fillStyle="#ff00ff";  //指定绘制图形的填充色
 context.fillRect(50,25,100,50); //指定绘制矩形的位置和尺寸，前面是坐标点，后面是宽和高
 //也可以用stroke画轮郭
 context.strokeStyle="#ffffff";  //指定绘制图形的填充色
 context.strokeRect(0,0,100,50); //指定绘制矩形的位置和尺寸，前面是坐标点，后面是宽和高
 //fillstyle还可以使用rgb，颜色名，透明度，如：
 context.fillStyle="#ff00ff";
 context.fillStyle="red";
 context.fillStyle="rgb(255,0,0)";
 context.fillStyle="rgba(255,0,0,1)"; //多个透明度
 </script>
//使用strokerect是描边矩形，就是一个轮郭线

5.2.3 绘制圆形
 <canvas id="myCanvsas" widht ="200" height="100>你是浏览器不支持</canvas>
 <script type="text/javascript">
 var c = document.getElementById("myCanvas"); //获取画布
 var context=c.getContext("2d"); //调用，指定参数是2d环境，getcontext是返回一个内建的对象，用这个对象来绘图
 context.fillStyle="#ff00ff"; //绘图形的填充色
 context.beginPath(); //调用beginpath方法，表开始绘制路径
 context.arc(100,75,50,0,Math.PI*2,true); //arc是用来绘制弧线的，100,75表半径，0表开始角度,Math.PI*2表结束角度，true表按顺时针
 context.closePath(); //调用closepath方法，表结束绘制路径
 context.fill(); //调用fill()按填充色填充
 </script>
例2：使用一个循环体，执行15次循环，每个改改下它的半径
 <script type="text/javascript">
 var c = document.getElementById("myCanvas"); //获取画布
 var context=c.getContext("2d"); //调用，指定参数是2d环境，getcontext是返回一个内建的对象，用这个对象来绘图
 for(var i=0;i<15;i++){
  context.strokeStyle="#ff00ff"; //设置描边色
  context.beginPath(); //调用beginpath方法，表开始绘制路径
  context.arc(0,150,i*10,0,Math.PI*3/2,true); 
   //arc是用来绘制弧线的，0,150为圆心，i*10为半径，起点是0到Math.pi*3/2绘出的是扇形, true表顺时针
  //context.closePath(); //不能调用这句，因为closePath会把起始点和结束点连在一起形成封闭空间，绘会是的弓形
  context.stroke(); //调用fill()按填充色填充
 }
 </script>

5.2.4 绘制三角形
 <canvas id="myCanvas" widht ="200" height="100>你是浏览器不支持</canvas>
 <script type="text/javascript">
 var c = document.getElementById("myCanvas"); //获取画布
 var context=c.getContext("2d"); //调用，指定参数是2d环境，getcontext是返回一个内建的对象，用这个对象来绘图
 context.fillStyle="red"; //填充图形的颜色
 context.beginPath();
 context.moveTo(25,25); //在context对象上调用moveTo方法，从25,25坐标点开始绘制 moeTo用来建立一个新的子路径
 context.lineTo(150,25);  //指定第2个点，绘制到150，25坐标处，没有moveto，lineTo也可用
 context.lineTo(25,150);  //指定第三个点，再绘制到25,150
 context.fill(); //表用填充色填充三点之间的区域
 </script>
绘制空心的三角形
 <script type="text/javascript">
 var c = document.getElementById("myCanvas"); //获取画布
 var context=c.getContext("2d"); //调用，指定参数是2d环境，getcontext是返回一个内建的对象，用这个对象来绘图
 context.strokeStyle="red"; //路径的颜色
 context.beginPath();
 context.moveTo(25,25); //在context对象上调用moveTo方法，从25,25坐标点开始绘制 moeTo用来建立一个新的子路径
 context.lineTo(150,25);  //指定第2个点，绘制到150，25坐标处，没有moveto，lineTo也可用
 context.lineTo(25,150);  //指定第三个点，再绘制到25,150
 context.closePath(); //闭合三个点
 context.stroke(); //对轮郭渲染轮廓
 </script>
 
5.2.5 清空画布
清除画布的图形
context.clearRect(x,y,width,height); //起点到宽和高的区别
function clearMap(){
 context.clearRect(0,0,300,200);  //清除整个画布 清除300*200区域的所有内容
}
给按钮添加的onclick事件添加 onClick="clearMap();"，可以点按钮清空画布

5.3.1 绘制二次方贝塞尔曲线
就是一个弧线，统计图的那种
 <input name="" type="button" value="清空画布" onClick="clearMap();">
 <canvas id="myCanvsas" width ="200" height="100>你是浏览器不支持</canvas>
 <script type="text/javascript">
 var c = document.getElementById("myCanvas"); //获取画布
 var context=c.getContext("2d"); //调用，指定参数是2d环境，getcontext是返回一个内建的对象，用这个对象来绘图
 //quadraticCurveTo //第一二个参数是控制点坐标，三四是终点坐标
 //下面开始绘制二次方贝塞尔曲线
 context.strokeStyle = "dark"; #颜色边线的
 context.beginPath(); //开始绘制
 context.moveTo(0,200); //第一个点
 context.quadraticCurveTo(75,50,300,200); //调用这个方法，前两个为曲线的控制点坐标，后两个为终点坐标
 context.stroke();  //   
 context.globalCompositeOperation="source-over";
 //下面绘制上主要是为了看清上面的控制点，为了看清，是起点到控制点再到终点的连接线
 //下面绘制的直线用于表示上面曲线的控制点和控制线，控制点坐标即两直线的交点(75,50)
 context.strokeStyle="#ff00ff"; //颜色
 context.beginPath();
 context.moveTo(75,50);   //
 context.lineTo(0,200);
 context.moveTo(75,50);
 context.lineTo(300,200);
 context.stroke();
 </script>

5.3.2 绘制三次方贝塞尔曲线
绘制三次方贝塞尔曲线用bezierCurveTo方法
 //下面开始绘制三次方贝塞尔曲线
 context.strokeStyle = "dark"; #颜色边线的
 context.beginPath(); //开始绘制
 context.moveTo(0,200); //指定第一个点
 context.bezierCurveTo(25,50,75,50,300,200); 
  //调用这个方法，前两个为曲线的第一控制点坐标，中间两个为第二控制点坐标，后两个为终点坐标
 context.stroke();  //   
 context.globalCompositeOperation="source-over";
 //下面绘制上主要是为了看清上面的控制点，为了看清，是起点到控制点再到终点的连接线
 //下面绘制的直线用于表示上面曲线的控制点和控制线，控制点坐标即两直线的交点(75,50)
 context.strokeStyle="#ff00ff"; //颜色
 context.beginPath();
 context.moveTo(25,50);   //第一个坐标点
 context.lineTo(0,200);
 context.moveTo(75,50);
 context.lineTo(300,200);
 context.stroke();
三次方和三次外观一样，只是三次有两个手柄

5.4.1 保存与恢复Canvas状态
保存当前画布的所有图形
保存到堆与从堆中取出
context.save() //保存当前状态，貌似只能保存context.fillStyle="#ff00ff";和context.strokeStyle="blue";属性值
context.restore() //恢复保存的fillStyle和strokeStyle属性值
例子见视频

5.4.2 移动坐标空间
默认以画布左上角为坐标原点，x水平向右为正，y向下为正
移动坐标的原点，移动原点时最好先用save保存原来的
windows.onload=function(){ //当页面 载入时执行draw()函数
 draw();
}
ctx.translate(60*i,0) //改变坐标原点
每次改变原点绘制一个图形

5.4.3 旋转坐标空间
以原点为中心旋转画布，只有一个参数即旋转的角度，以顺时针方向
function draw(){
 var ctx = document.getElementById('myCanvas').getContext("2d");
 ctx.translate(150,150);
 for (var i=1;i<10;i++){
  ctx.save();
  ctx.retate(Math.PI*(2/4+i/4)); //这个是旋转坐标原点的
  ctx.translate(0,-100); //再改变坐标原点
  drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)"); //drawTop为前面定义的函数
  drawGrip(ctx); //也是前定义的函数
  ctx.restore(); 
 }
}

5.4.4 缩放图形
增减canvas上下文像素的数目，从而实现位图的缩放
有两个值，x,y，x缩放的因子，放大因子大于1，缩小因子小于1
多个圆球在旋转中缩小
<script language="javascript">
function draw(){
 var ctx = document.getElementById('myCanvas').getContext("2d");
 ctx.translate(200,20); //改变坐标原点
 for (var i=1;i<80;i++){
  ctx.save();
  ctx.translate(30,30); //改变原点
  ctx.scale(0.95,0.95); //缩放因子
  ctx.rotate(Math.PI/12); //旋转坐标空间
  ctx.beginPath();  //开始绘制路径
  ctx.fillStyle="red";
  ctx.globalAlpha="0.4";
  ctx.arc(0,0,50,0,Math.PI*2.true); //画圆的
  ctx.closePath();
  ctx.fill();
 }
}
</script>

5.4.5 矩阵变换
是数学线性代数的概念
对位数每一点进变换，使图像旋转，移动，镜像
context.transform(m11,m12,m21,m22,dx,dy);
矩阵变换
x'=(m11)x+(m21)y+dx
y'=(m12)x+(m22)y+dy
context.transform(0,1,1,0,dx,dy);
x'=x+dx
y'=y+dy
旋转的
context.transform(cos0,sin0。。。);

5.5.1 图形的组合
当两个重合时，一个盖住另一个，改变绘制顺序和方式
重合时用flobalAlpha定义透明度
<script language="javascript">
window.onload=function(){
 var c=document.getElementById("myCanvas");
 var context = c.getContext("2d");
 context.fillStyle="red";
 context.fillRect(50,25,100,100);
 context.fillStyle="green";
 context.globalCompositeOperation="source-over"; //有多个值，
  //source-over //后画的盖前画的面，默认的
  //destination-over //前画盖后画
  //source-atop  //只绘制原有内容和新图与原有内容重叠的部分，新图位于原有内容之上
  //destination-atop //只绘制新图全部，旧图只保留与新图重叠的部分
   //还有交集，淘空等
 context.globalAlpha=0.5;
 context.beginPath();
 context.arc(150,125,50,0,Math.PI*2,true);
 context.closePath();
 context.fill(); 
}

</script>

5.5.2 裁切路径
没有被蒙板的区域隐藏
ctx.clip()
显示部分，其它不显示
例子见视频

5.6.1 应用不同的线形
通过几个属性值，设置线性的样式
lineWidth = value 设置宽度
lineCap=type
lineJoin=type 连接样式
miterLimit=value 交叉点样式
ctx.lineWidth=1+i
var lineCap=['butt','round','square']; 线头样式，
var lineJoin=['round','bevel','miter']  线头相交的样式

5.6.2 绘制线性渐变
绘制再上色
context.createLinearGradient(x1,y1,x2,y3); 绘制渐变的方法，起始坐标与宽度
addColorStop(position,color) 上色的方法，坐标，就是渐变的中心点，颜色，
可以添加多个色标用addcolorStop

5.6.3 绘制径向渐变
context.createRadialGradient(x1,y1,r1,x2,y3,r2) 原点，半径
绘制灯光照射效果

5.6.4 绘制图案
填充图案
createPattern(image,type) 图片路径，填充类型
 repeat 沿x轴与y轴平铺

5.6.5 设置图形的透明度
适合为大量图形设置相同的透明度
rgba(R,G,B,A) 用到这个函数，A是0-1之间的浮点数
画圆从大到小，越来越透明

5.6.6 创建阴影
shadowOffsetX = float 阴影水平偏移
shadowOffsetY= float; 阴影x轴偏移
shadowBlur = float;  阴影羽化程度
shadowColor = color; 阴影颜色，默认黑色
ctx.shadowoffsetX = 3 向右下偏移2像素

5.7.1 绘制填充文字
fillText（text,x,y[MaxWidth]) 文字，x,y轴，最大宽度

5.7.3 绘制轮廓文字
以轮廓方式绘制字体
context.strokeText(text,x,y[maxWidth])
ctx.strokeText(“绘制的文字”,200,300,500)

5.7.4 测量文字宽度
metrics=context.measureText(text); #获取text的文字的宽度
获取文字的宽度，输出，或填充其它色

5.8.1 向Canvas中引入图像
确定图像来源有4种方式，抓取网页的中图像元素，也可用脚本创建image对象
varimg=newImage(); img.src='Image1.png';
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight); 最大最小宽度
img.onload=function() #图像加载时调用

5.8.2 改变图像大小
drawImage还可以改变图像大小
给画布加边框 style="solid 1px"

5.8.3 创建图像切片
drawImage第三种用法，
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight); 原图像被切割区的起始坐标，被切的宽和高，要放置目标的坐标，目标放在宽和高
ctx.drawImage(img,30,40,140,180,0,240,140,180);