canvas快速入门（四）canvas的文本，图片及canvas实现视频截屏功能

canvas文本

填充文本

ctx.fillText("ABC",100,100);

参数

• 字体内容
• 字体位置x
• 字体位置y
• 字体宽度（可不设置，超过最大宽度会挤压）

填充字体边线（空心字）

ctx.strokeText("ABC",100,100);  

设置字体

ctx.font="46px 宋体"; 

参数

• 字体大小
• 字体样式

设置字体方向

ctx.direction="ltr";

参数

• 文字从 左向有写(ltr) 还是 从右向左写(rtl)

文本对齐方式

 ctx.textAlign="center"//居中

当前字实际占有的宽高

  var o=ctx.measureText("你好，欢迎来到这里!");
    console.log(o);

---

canvas图片

图片必须加载完成才能操作

 var img=new Image();
        img.addEventListener("load",loadHandler);
        img.src="./a.jpg";
        function loadHandler(e){
              //设置图片的代码
        }

将图片定位到50*50的位置

   ctx.drawImage(img,50,50);

将图片定位到50 * 50的位置 宽高是200*190（图片缩小）

   ctx.drawImage(img,50,50,200,190);

将图片定位到5050的位置 宽高是200190（图片缩小）剪切到5050的位置 剪切大小5050

  ctx.drawImage(img,50,50,200,200,50,50,50,50);

精灵图绘制

   //图源,精灵图X偏移，Y偏移，内容宽度，高度，放在canvas上的坐标X，y，宽，高
   ctx.drawImage(img,128,126,14,14,100,100,14,14);

canvas实现视频截屏功能

  var mp4=document.querySelector("video");
        var bn=document.querySelector("button");
        bn.addEventListener("click",clickHandler);
        
        function clickHandler(e){
            ctx.drawImage(mp4,0,0,536,480);
        }