canvas

1、创建2d画布

canvas=document.createElement("canvas");
canvas.width=400; //画布不能通过style宽度、高度样式设置，会拉伸比例
canvas.height=300;
document.body.appendChild(canvas);
ctx = canvas.getContext("2d"); //制定画布为2d画布

2、canvas绘制一个矩形

fillStyle 设置前景色

用于填充图形，他是一个可读可写的属性

fillRect 绘制矩形

fillRect(x => 起始点x坐标 , y => 起始点y坐标 , width => 绘制矩形宽度 , height => 绘制矩形高度)

绘制

ctx.fillStyle="red"; //设置填充色
ctx.fillRect(100,100,50,30); //创建一个矩形，并填充颜色

3、用笔触绘制自定义图形

beginPath 绘画开始

笔触绘制时要设置ctx.beginPath() 来落笔

closePath 结束绘画

当一段绘画结束后设置ctx.closePath() 来抬笔,抬笔后，会自动将最后一次moveTo设置的起点与终点进行连接

moveTo 设置路径起点

设置路径起点,也用于断开持续连接的锚点，在新起点绘画

moveTo(x => 起点x坐标 , y => 起点y坐标);

lineTo 设置锚点

绘制的多个锚点会进行连接

strokeStyle 笔触的颜色

获取与设置笔触颜色，可读可写的属性

lineWidth 线条宽度

获取与设置描绘线条的宽度

根据路径画线

根据每个路径来画线

ctx.strokeStyle="red"; 边框色

ctx.beginPath(); 开始绘画

ctx.moveTo(30,30); 设置路径起点

ctx.lineTo(30,60); 创建锚点，并且连接路径

ctx.lineTo(60,60);

ctx.stroke(); 根据现有路径绘制边框线

ctx.closePath(); 结束绘画

4、画一个自定义圆

arc 绘制圆形

arc(x => 圆心的X坐标 , y=> 圆心的y坐标 , r => 半径 , startAngle => 开始的弧度 , endAngle => 结束的弧度 , decrition => 绘制的方向,默认顺时针);

开始绘制

ctx.fillStyle="black";

ctx.beginPath();

ctx.arc(100,100,40,0,Math.PI/180*360);

ctx.fill();

5、图案填充

createPattern 创建图案预设

createPattern(img => 添加预设图片 , repeat => 设置图片平铺方式);

在使用图案时要先进行预加载

let img = new Image();
img.addEventListener("load",loadHandler);
img.src="./img/gunda_0.jpg";


function loadHandler (this:any,e:any) {
    let patt:any = ctx.createPattern(this,"repeat"); //创建预设
    ctx.fillStyle=patt; //填充色使用预设图案
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.fill(); //填充
}

6、设置阴影效果

所有的设置都要在添加文本之前

shadowBlur 阴影扩展

shadowColor 投影颜色

shadowOffsetX 投影横向偏移

shadowOffsetY 投影纵向偏移

ctx.fillStyle="red";
ctx.shadowBlur=4;
ctx.shadowColor="black";
ctx.shadowOffsetX=3;
ctx.shadowOffsetY=3;

ctx.fillRect(50,50,100,100);
ctx.fill();

7、文本

所有的设置都要在添加文本之前

textBaseline 文字基线对齐方式

默认为文字底端对齐

font 字体的复合样式

设置文字大小、字体等设置，必须含有文字大小、字体

textAlign 文本横向对齐方式

基于添加文字时的坐标来进行对齐

direction 文本的排列方向

默认自左向右

fillText 添加文字

添加文字

measureText 获取文本宽度数据

measureText(text => 绘制文本)

在绘制之前来获取文本宽度数据 ,来进行位置计算

填充文字

ctx.textBaseline="top";
ctx.font="30px 隶书";
ctx.textAlign="right";
ctx.fillText("郝福胜你好",canvas.width,30);

8、图片源绘制

drewImage 绘制图片

drewImage(img => 加载完成的图片 , x => 图片截取的x坐标 , y => 图片截取的y坐标,width => 图片缩放宽度, height => 图片缩放高度, x => 放置的x坐标 , y => 放置的y坐标,width => 填充的图片宽度缩放, height => 填充的图片高度);

绘制图片

let img = new Image();
img.addEventListener("load",loadHandler);
img.src="./img/gunda_0.jpg";


function loadHandler (this:any,e:any) {
    ctx.drawImage(img,0,0,canvas.width,canvas.height);
}

它还可以绘制视频帧

ctx.drewImage(video,0,0);

绘制canvas

ctx2.drawImage(canvas1,0,0); //canvas2,绘制canvas1的内容

视频颜色块获取

getImageData 获取图片的rgba数值

ctx.getImageData(x => x坐标 , y => y坐标, width => 宽度 , height => 高度) 

获取视频截图的当前设置区域的像素数据，像素的数据是按照rgba的数据来四个四个的放在数组里，这样将视频截图的像素放在数组里，可以来做绿幕抠图

按钮图片所在色彩块，这样用getImageData获取色彩块是按钮色彩的话就是这个按钮，这样可以定位自定义形状的绘制按钮，大致知道矩形位置，在判定颜色是不是指定按钮颜色

putImageData 绘制截图

ctx.putImageData(data => getImageData获取的数据); //绘制截图数据