处理兼容性的问题
1、用文本替换
语法：<canvas>您的浏览器不支持canvas！请升级您的浏览器版本</canvas>
<canvas><img src=”” alt=””></canvas>
检测支持性
步骤：
1、 先再js里获取canvas
2、 获得2d上下文 var ctx=can.getContext（“2d”） 绘制矩形
canvas只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径（path）。不过，我们拥有众多路径生成的方法让复杂的绘制成为了可能。
Canvas提供了三种方法绘制矩形
1、 fillRect（x，y，width，height）绘制一个填充的矩形
2、 strokeRect（x，y，width，height）绘制一个矩形的位置
3、 clearRect（x，y，width，height）清除指定的矩形区域，然后这块区域会变的完全透明
说明：这3个方法具有相同的参数
x，y指的是矩形左上角的坐标。（确定举行的0，0点）
width，height指的是绘制的矩形的宽和高
绘制路径
- 图形而基本元素是路径。
- 路径是通过不同颜色和宽度的线段或曲线相连形成的而不同形状的点的集合。
- 一个路径，甚至一个子路径，都是闭合的。
- 使用路径绘制图形需要一些额外的步骤。
- 创建路径起始点
- 调用绘制方法绘制出路径
- 把路径封闭
- 一旦路径生成，通过描边或填充路径区域来渲染图形。
需要用到的方法
Canvas●beginPath()
说明：新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
Canvas●moverTo（x，y）
说明：把画笔移动到指定的坐标（x，y），相当于设置路径的起点坐标
Canvas●lineTo（x，y）
说明：把画笔移动到指定的坐标（x，y），相当于设置路径的终点坐标
Canvas ●closePath（）
说明：闭合路径之后，图形绘制命令又重新指向到上下文中。
Canvas● stroke（）
说明：通过线条来绘制图形轮廓
canvas●fill（）
说明：通过填充路径的内容区域生成实心的图形。
绘制圆弧
会有两个方法绘制圆弧
1、 arc（x，y，r，starAngle，endAngle，anticlockwise）：以（x，y）为圆心，以r为半径，从starAngle弧度开始到endAngle结束，true表示逆时针，false表示顺时针（默认是顺时针）
注意：这里的度数都是弧度
弧度是指的x轴正方形
radians=(Math.PI/180)*deg//角度转换成弧度
绘制二次贝塞尔曲线
语法：quadraticCurveTo（cp1下，cp1y，x，y）
说明：参数1和参数2，控制坐标点，参数3和参数4，结束点坐标
添加样式和颜色
Canvas.fillStyle=color设置图形的填充颜色
Canvas.strokeStyle=color 设置图形轮廓的颜色
备注：
1、 color可以是css颜色值的字符串，渐变对象或者图案对象
2、 默认情况下，线条和填充颜色都是黑色
3、 一旦设置了strokeStyle或者fillStyle的值，那么这个新值就会成为新绘制的图形的默认值，如果你要给每个图形上不同的颜色，你需要重新设置fillStyle或strokeStyle的值
线的样式
说明：线宽。只能是正值，默认是1.0
起始点和终点的连线为中心，上下各占线宽的一半
lineCap=type
ctx●lineCap=butt；
线条末端样式，共有三个属性值
1、 butt线段末端以方形结束
2、 round线段末端以圆形结束
3、 square线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域
lineJoin=type
同一个path内，设定线条与线条间接合处的样式。
共有3个属性值：
1、 round通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状，圆角的半径是线段的宽度。
2、 bevel在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。
3、 miter（默认）通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。
虚线
用setLineDash方法和lineDashOffset属性来定制虚线样式。SetLineDash方法接受一个数组，来指定线段与间隙的交替：lineDashOffset属性设置起始偏移量
绘制文本
设置填充文本样式：fillText（text，x，y） 指定的x，y位置填充制定的文本
设置描边/空心文本样式：strokeText(text, x, y) 在指定的（x，y）位置绘制文本框，text是你要写的汉字文本
给文本添加样式
设置字号和字体：font=value 默认10像素，字号和和字体之间用空格隔开。
文本对齐选项：textAlign=start/end/left/right/center
基线对齐选项：textBaseline=value 极限对齐选项，可选的值包括：top，hanging，middle，alphabelic，ideographic，bottom。默认值是alphabetic。
文本方向：direcation=ltr/rtl/inherit（默认值）
文字不用设置路径，直接写就可以了
绘制图片（支持把一张图片放到canvas里）
1、 在body里写一个img标记，在js里找到它，并把它渲染到canvas里
2、通过构造函数引入一个新的图片
Var img2=new Image();//构造函数内置的，生成一个图片对象
img2.src=”图片路径”//它是异步操作，要给img绑定onload事件
获取一张图片的对象，或者通过url引入图片，使用drawImage（）方法将图片绘制到画布上
**语法：canvas●drawImage（img名称，x，y） ** 说明：必须要有三个参数
第一个参数是img的名字，xy为图片的0，0点坐标
语法：canvas●drawImage（img名称，x，y，width，height）
说明：写入图片时设置图片的大小
语法：canvas●drawImage（img名称，sx，sy，swidth，sheight，dx，dy，dwidth，dheight）
说明：img名称：图片的对象名
sx，sy截取图像位置的起点，也是左上角
swidth，sheight截取图像的宽高
dx，dy截取图片在canvas画布上的位置
dwidth，dheight截取下来之后图片的宽高。
循环柱状图
<body>
<!-- <canvas id="can" width="700" height="500"></canvas> -->
<canvas width="700" height="500" id="can">您的浏览器不支持canvas</canvas>
</body>
<script>
var can=document.getElementById('can');
var ctx=can.getContext('2d');
// 绘制x,y轴
ctx.beginPath();
ctx.moveTo(50,100);
ctx.lineTo(50,400);
ctx.lineTo(400,400)
ctx.stroke()
ctx.closePath();
// 绘制数字x，y
ctx.font="20px 黑体"
ctx.fillText("y",30,100);
ctx.fillText('x',400,420)
// 绘制y箭头
ctx.beginPath();
ctx.moveTo(40,110);
ctx.lineTo(50,100);
ctx.lineTo(60,110)
ctx.stroke()
// 绘制x箭头
ctx.beginPath();
ctx.moveTo(390,390);
ctx.lineTo(400,400);
ctx.lineTo(390,410);
ctx.stroke()
//使用16进制生成每条柱子的颜色
let colorArr=[];
for(let i=0; i<8; i++){
let color='#'+parseInt(Math.random()*0xffffff).toString(16);
colorArr.push(color)
}
console.log(colorArr)
// 绘制x轴坐标，在对应坐标位置绘制对应的矩形
for(let i=0;i<6;i++){
let xStart=80+i*50;
// ctx.beginPath();
// ctx.moveTo(xStart,450);
// ctx.lineTo(xStart,460);
// ctx.stroke();
// ctx.closePath()
ctx.fillStyle=colorArr[i]
let height=Math.random()*300;
// 绘制矩形，x，y，width，height xy为00点
ctx.fillRect(xStart-10,400-height,20,height)
ctx.font="16px Arial";
ctx.fillStyle="#000"
ctx.fillText((xStart-80)/50,xStart,420)
ctx.closePath()
}
//绘制y轴坐标和坐标值
for(let i=430;i>100; i-=50){
ctx.beginPath();
// ctx.moveTo(45,i);
// ctx.lineTo(50,i);
// ctx.stroke();
ctx.font="16px 黑体";
ctx.textAlign="right";
ctx.fillStyle="#000";
ctx.fillText(Math.abs(i-430),40,i)
ctx.closePath()
}
// for(let i=0; i<8; i++){
// let x=100 + i * 40;
// let y=30;
// ctx.fillStyle=colorArr[i];
// ctx.fillRect(x,y,25,20)
// }
</script>
放大镜
<body>
<div class=di>
<img src="ren.png" alt="" id="img1">
<div class="zzc zz"></div>
</div>
<canvas id="can" width="200" height="200"></canvas>
</body>
<script>
var can=document.getElementById('can');
var ctx=can.getContext('2d');
var img1=document.getElementById('img1');
img1.onmousemove=function(e){
// var ox=(e.offsetX-50)*1.2;
// var oy=(e.offsetY+25)*1.2;
// console.log(ox,oy)
var ox=e.offsetX-50;
var oy=e.offsetY-50;
ctx.clearRect(0,0,200,200)
ctx.drawImage(img1,ox,oy,100,100,0,0,200,200);
document.querySelector('.zzc').style.left=ox+"px";
document.querySelector('.zzc').style.top=oy+"px";
}
</script>
