canvas API

1.1 cnavas的基本设置

canvas的width和height一定要写在标签中；如果用js设置宽高，写在私有属性上，不是style.width;否则会拉伸变形
<canvas width='800px' height='500px'></canvas>

1.2 绘制基本结构

//得到标签
let canvas=document.getElementById('canvas');
//上下文:提供一个2D画布，以后所有设置都是针对上下文来进行设置的；
let ctx=canvas.getContext('2d');//今后绘制的图形，图片都是使用ctx，而不是canvas这个对象；
ctx.style.border='1px solid #000';
//设置canvas的边框
ctx.beginPath();
//开始绘制
ctx.fillRect(100,0,200,200)

1.3 填充和描边

canvas中基本形状是线，矩形，弧。
绘制东西，分为两种：一种叫填充fill； 一种叫描边stoke；
好了，我们开始绘制吧！

let canvas=document.getElementById('canvas');
let ctx=canvas.getContext('2d');

线

ctx.beginPath();//开始绘制
ctx.moveTo(50,50);//起始坐标
ctx.lineTo(100,200);//绘制线的路径，可以是多个
ctx.lineTo(400,100);
ctx.closePath();//绘制的结束坐标
ctx.strokeStyle='red';//设置线的颜色，一定要设置线的宽度，否则看不到，且在画线之前设置
ctx.lineWidth=10;//设置线的宽度
ctx.stroke();//绘制线
//填充
ctx.fillStyle='pink';
ctx.fill();//fill()方法一定要在最后

矩形

有两种写法，以下：

ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.stroke();
ctx.fill();

ctx.strokeRect(50,50,100,100);
ctx.fillRect(20,20,150,150);

插入图片

drawImage(img,x,y,w,h,dx,dy,dw,dh);
img:图片； x,y:切片在ps中的位置； w,h:切片在ps中的宽高； dx,dy:切片在画布中的位置； dw,dh:切片在画布中的宽高；

//1.创建图片对象
var img=new Image;
//2.发送图片地址请求
img.src='xxx.jpg';
//3.在画布上展示图片：注意一定要图片加载成功再展示
img.onload=function(){
  drawImage(img,x,y,w,h,dx,dy,dw,dh);
}