canvas详解

canvas标签用于图像的绘制的标签
示例：
创建了canvas标签并且设置高和宽

<canvas  id="canvas" width="800" height="400"></canvas>

注意 width和heigh也可以用过css设置

getContext()方法返回一个用于在画布上绘画的环境
目前参数只能传 2d
未来可能有3d

let cttx=canvas.getContext('2d');
//绘制元素都是基本返回的对象上进行绘制

Canvas坐标

左上角的0.0

绘制矩形

fillRect(x,y,width,height)； //填充矩形
strokeRect(x,y,width,height) //绘制矩形边框
clearRect(x,y,width,height)； //清除指定矩形区域
举栗：

	let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext('2d');
    ctx.fillRect(5,5,100,100) //在x:5 y:5 画一个100*100的矩形

绘制路径

绘制路径有四个步骤: （类似ps钢笔）
1.创建起始点
2.画出路径
3.路径封闭
4.填充路径
这四个步骤并不是一定都要用 看自己需求
beginPath() 新建一条路径
closePath（） 闭合路径
stroke() 通过线条来绘制轮廓
fill（） 填充路径
moveTo(x,y) //线段起始位置
lineTo(x,y) //线段结束位置
绘制空心三角形

let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(75,50);  //起始位置 相当于画画时的笔尖
    ctx.lineTo(100,25); //笔移动的位置
    ctx.lineTo(100,75); 
    ctx.lineTo(75,50) //此部可以由closePath()代替
    ctx.closePth();
    ctx.stroke();

绘制 圆弧

arc（）方法
arc（x,y,radius,startAngle,endAngle,anticlockwise）
x,y 起始坐标
radius：圆的半径
startAngle：起始弧度
endAngle：结束弧度
anticlockwise：给定方向默认为 顺时针 false为顺时针 true 为逆时针
这里弧度：
弧度=(Math.Pi/180)*角度

画一个圆

 let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(95,40,40,0,2*Math.PI);
    ctx.stroke();

绘制笑脸

let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext('2d');
    ctx.beginPath();
    //画一个圆
    ctx.arc(75,75,50,0,2*Math.PI,false);
    //移动线的位置
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
    ctx.stroke();

二次贝塞尔曲线及三次贝塞尔曲线

quadraticCurveTo(cp1x,cp1y,1,x,y)
xy：为开始结束点
cp1x,cp1y为控制点
对于这些参数怎么填设计到数学问题
但是我们可以到浏览器中一步步调试

let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(75,75);
    ctx.quadraticCurveTo(25,25,25,65.25)
    ctx.stroke();

颜色

fillStyle=color //填充颜色
strokeStyle=color //设置图像边框颜色
绘制一个三角形设置为橘黄色

let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext('2d');
    ctx.beginPath();
    ctx.fillStyle="orange"
    ctx.moveTo(75,75);
    ctx.lineTo(100,100);
    ctx.lineTo(100,25);
    ctx.closePath();
    ctx.fill();

let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext('2d');
    ctx.beginPath();
    ctx.strokeStyle="red"; //设置为红色
    ctx.moveTo(75,75);
    ctx.lineTo(100,100);
    ctx.stroke();

透明度Transparency

globalAlpha=[0-1]
设置图像的透明度
另外也可以用过rgba设置透明度
let ctx.fillStlye=rgba(255,255,255,0.2);

let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext('2d');
    ctx.beginPath();
    ctx.fillStyle="orange"
    ctx.globalAlpha=0.2; //设置透明度
    ctx.moveTo(75,75);
    ctx.lineTo(100,100);
    ctx.lineTo(100,25);
    ctx.closePath();
    ctx.fill();

线条样式

lineWidth=value;
设置线条宽度
lineCap=type
type有：
butt
round
square

线条末端样式
lineJoin=type
线条与线条间接合处的样式

绘制图像

drawImage（）在画布上绘制图像、或者视频
在画布上定位图像：
drawImage(img,x,y)

let canvas=document.getElementById("canvas");
    let ctx=canvas.getContext('2d');
    let img=new Image();
    img.src="img/bg.jpg";
    img.onload=function(){ //img.onload等图片加载完在画
        ctx.drawImage(img,0,0)
    }

在画布上定位图像并且规定图像的宽度和高度
drawImage(img,x,y,width,height)；

ctx.drawImage(img,0,0,100,100)

设置图像并且剪切图像
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
img：使用的图片或者视频
sx:剪切的x坐标 可选
sy：剪切的y坐标 可选
swidth: 剪切宽度 可选
wheight: 剪切高度 可选
x: 图片x坐标
y:图片y坐标
width:

参数	描述
img	使用的图片或者视频
sx	可选 剪切的x坐标
sy	可选 剪切的y坐标
swidth	可选 剪切的宽度
sheight	可选 剪切的高度
x	图片的x坐标
y	图像的y坐标
width	可选 图像的宽度
height	可选 图像的高度