Canvas下

一、绘制img/video
图片预加载，获取图片文件，顾名思义，WEB中的预加载就是在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有的内容加载完毕。
var img = new Image();
img.onload = fn
drawImage(img, x, y, w, h)
绘制图片(img, 从img图片的x点开始绘制，从img图片的y点开始绘制，绘制的img宽度，绘制的img高度，绘制在画布的x点，绘制在画布的y点，绘制的图形宽度，绘制的图形高度)

let oC = document.querySelector("canvas");
let cxt = oC.getContext("2d");
let img = new Image();
img.src = "./img/img.jpg";
img.onload = function(){
  cxt.drawImage(img, 0, 0);  //原生代码执行速度极大，图片要加载时间
}

img.onload = function(){
  cxt.drawImage(img, 0, 0, 500, 220);
}

img.onload = function(){
  cxt.drawImage(this, 220, 55, 320, 90, 100, 100, 320, 90);
}

绘制视频

let oC = document.querySelector("canvas");
let video = document.querySelector("video");
let cxt = oC.getContext("2d");
fn();
function fn(){
  cxt.drawImage(video, 0, 0, 500, 300);
  requestAnimationFrame(fn);
}
document.onclick = function(){
  video.play();
}

二、设置填充背景
createPattern(img, 平铺方式)
平铺方式：repeat, repeat-x, repeat-y, no-repeat

img.onload = function(){
  let bg = cxt.createPattern(this, "repeat-y");
  cxt.fillStyle = bg;
  cxt.fillRect(0, 0, 500, 500);
  cxt.drawImage(this, 220, 55, 320, 90, 100, 100, 320, 90);
}

三、颜色渐变
线性渐变：createLinearGradient(x1, y1, x2, y2)
x1,y1起始坐标点
x2,y2结束坐标点
径向渐变：createRadialGradient(x1, y2, r1, x2, y2, r2)
x1,y1,r1内圆坐标及半径
x2,y2,r2外圆坐标及半径
addColorStop(位置,颜色)
位置：渐变点 0-1之间，可多个

//线性渐变是从一个方位渐变另一个方位
let color = cxt.createLinearGradient(0, 0, 500, 500);
//添加颜色的起止位置
color.addColorStop(0, "red");
color.addColorStop(0.5, "yellow");
color.addColorStop(1, "blue");
cxt.fillStyle = color;
cxt.fillRect(0, 0, 500, 500);

//径向渐变
let color = cxt.createRadialGradient(250, 250, 20, 250, 250, 100);
//添加颜色的起止位置
color.addColorStop(0, "red");
color.addColorStop(0.5, "yellow");
color.addColorStop(1, "blue");
cxt.fillStyle = color;
cxt.fillRect(0, 0, 500, 500);

四、绘制曲线
arcTo(x1, y1, x2, y2, r)
x1,y1坐标一 x2,y2坐标二 r圆弧半径
quadraticCurveTo(dx, dy, x1, y1)
贝塞尔曲线：dx, dy控制点 x1,y1结束坐标
bezierCurveTo(dx1, dy1, dx2, dy2, x1, y1)
贝塞尔曲线：dx1, dy1 控制点一 dx2, dy2控制点二 x1,y1结束坐标

cxt.moveTo(150, 320);
cxt.arcTo(150, 170, 335, 170, 80);
cxt.stroke();

cxt.strokeStyle = "yellow";
cxt.moveTo(200, 200);
cxt.quadraticCurveTo(300, 50, 450, 200);
cxt.stroke();

cxt.strokeStyle = "red";
cxt.moveTo(250, 50);
cxt.bezierCurveTo(50, 150, 450, 350, 250, 450);
cxt.stroke();

五、绘制文本属性
strokeText(文本, x, y) 绘制空心文本
fillText(文本, x, y) 绘制实心文本
font = "font-size font-family" 注：尺寸，字体缺一不可
textAlign = "" 文本左右对齐方式（start center end left right）
textBaseline 文本上下对齐方式
alphabetic 默认，文本基线是普通的字母基线
top 文本基线是em方框的顶端
hanging 文本基线是悬挂基线
middle 文本基线是em方框的正中
ideographic 文本基线是表意基线
bottom 文本基线是em方框的底端
measureText(文本).width 文本实际宽度(只有宽度值)

const str = "Hello World";
cxt.fillStyle = "yellow";

//水平位置
cxt.textAlign = "start";
cxt.textAlign = "right";
cxt.textAlign = "center";

//垂直位置
cxt.font = "20px 微软雅黑";
cxt.textBaseline = "top";
cxt.textBaseline = "hanging";
cxt.textBaseline = "middle";
cxt.textBaseline = "ideographic";
cxt.textBaseline = "bottom";
cxt.textBaseline = "middle";
console.log(cxt.measureText(str).width);
cxt.fillText(str, oC.width/2, 0);

六、阴影属性
shadowOffsetX, shadowOffsetY x轴、y轴偏移
shadowBlur 阴影模糊度
shadowColor 阴影颜色
默认颜色：rgba(0, 0, 0, 0)

cxt.shadowColor = "red";
cxt.shadowOffsetX = 2;
cxt.shadowOffsetY = 2;
cxt.shadowBlur = 0;

七、像素操作
createImageData(sx, sy) 创建新的、空白的ImageData对象
getImageData(x1, y1, w, h) 返回ImageData对象，该对象为画布上指定的矩形复制像素数据
putImageData(img, x2, y2) 把图像数据（从指定的ImageData对象）放回画布上

//颜色 三原色（r g b）组成的
//1个像素是由4个像素点组成的
//r g b a  取值0~255
let imgData = cxt.createImageData(100, 100);
for(let i = 0; i < imgData.data.length; i+=4){
  imgData.data[i+0] = 255;
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
}
cxt.putImageData(imgData, 200, 200);
console.log(imgData);

let img = new Image();
img.src = "./img/img.jpg";
img.onload = function(){
  cxt.drawImage(this, 0, 0);
  //对canvas画布裁剪
  let imgData = cxt.getImageData(170, 10, 40, 40);
  cxt.putImageData(imgData, 215, 300);
}

八、合成
globalAlpha 设置或返回绘画的当前alpha或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
source-over 默认。在目标图像上显示源图像
source-atop 在目标图像顶部显示源图像，源图像位于目标图像之外的部分是不可见的
source-in 在目标图像中显示源图像，只有目标图像内的源图像部分会显示，目标图像是透明的
source-out 在目标图像之外显示源图像，只会显示目标图像之外源图像部分，目标图像是透明的
destination-over 在源图像上方显示目标图像
destination-atop 在源图像顶部显示目标图像，源图像之外的目标图像部分不会被显示
destination-in 在源图像中显示目标图像，只有源图像内的目标图像部分会被显示，源图像是透明的
destination-out 在源图像外显示目标图像，只有源图像外的目标图像部分会被显示，源图像是透明的
lighter 显示源图像 + 目标图像
copy 显示源图像 + 忽略目标图像
xor 使用异或操作对源图像与目标图像进行结合

//目标图像
cxt.globalAlpha = 1;
cxt.fillStyle = "hotpink";
cxt.arc(200, 200, 150, 0, 6.3);
cxt.fill();

//很多的问题并不能直接搞好，需要从侧面入手，分析问题解决问题
cxt.globalCompositeOperation = "source-atop";
cxt.globalCompositeOperation = "source-out";
cxt.globalCompositeOperation = "destination-atop";
cxt.globalCompositeOperation = "destination-in";
cxt.globalCompositeOperation = "destination-out";

//源图像
cxt.beginPath();
cxt.fillStyle = "skyblue";
cxt.arc(280, 200, 150, 0, 6.3);
cxt.fill();

九、将画布导出为图片
火狐、谷歌浏览器右键菜单可直接导出为图片
canvas.toDataURL() 默认导出data:png; base64编码的二进制URL
canvas.toDataURL("image/jpeg") 导出data:jpg;base64编码的二进制URL

document.onclick = function(){
  oC.toBlob(function (blob){
    let link = document.createElement("a");
    link.download = "blob.png";
    link.href = window.URL.createObjectURL(blob);
    link.click();
  })
};

+function(){
  let data64 = oC.toDataURL();
  let link = document.createElement("a");
  link.download = "canvas.png";
  link.href = data64;
  link.click();

  let img = new Image();
  img.src = data64;
  img.onload = function(){
    document.body.appendChild(this);
  }
};