canvas 进阶

1.canvas ：标签只是图形容器  用于图形的绘制

2.canvas 画布内容

    a.空白画布：  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
                                 您的浏览器不支持 HTML5 canvas 标签。
                          </canvas>

        效果：             

    b.画直线或圆形：   

                                          

          直线：       var c=document.getElementById("myCanvas");     var ctx=c.getContext("2d");     ctx.moveTo(0,0);     ctx.lineTo(200,100);                       ctx.stroke();

          圆形：       var c=document.getElementById("myCanvas");     var ctx=c.getContext("2d");     ctx.beginPath();      ctx.arc(95,50,40,0,2*Math.PI);       ctx.stroke();

          字母：       var c=document.getElementById("myCanvas");      var ctx=c.getContext("2d");     ctx.font="30px Arial";        ctx.fillText("Hello World",10,50);

c.将图片画在画布上：

    

                                                                                         

                  

                      var c=document.getElementById("myCanvas");

                      var ctx=c.getContext("2d");

                      var img=document.getElementById("scream");

                      ctx.drawImage(img,10,10);

3.getContext("2d")   

         该对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

4.将画布中的图片转为base64

           参考文档：https://blog.csdn.net/XuM222222/article/details/82667084

           canvas.toDataURL('image/png', 1);

    toDataURL(type, encoderOptions)

•  type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；

•  encoderOptions用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；

   需要注意的是,图片加载是异步的,在转换成 dataURL 前必须先确保图片成功加载。

5.绘制图像 drawImage

          context.drawImage(img,x,y);                                                                 //在画布上放置图像的 x和y 坐标位置

          context.drawImage(img,x,y,width,height);                                              //规定图像的宽度和高度

          context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);             //剪切图像，并在画布上定位被剪切的部分

6.将h5中的div转为图片   html2canvas.js

        参考文档：https://www.jianshu.com/p/abd9e9c5ba20   

       注意：

• 不支持iframe
• 不支持跨域图片
• 不能在浏览器插件中使用
• 部分浏览器上不支持SVG图片
• 不支持Flash
• 不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问http://deerface.sinaapp.com/ 试试 :)

<script>
  new html2canvas(document.getElementById('qianduanwz')).then(canvas => {
    // canvas为转换后的Canvas对象
    let oImg = new Image();
    oImg.src = canvas.toDataURL();  // 导出图片
    document.body.appendChild(oImg);  // 将生成的图片添加到body
  });
</script>

        

7.将视频内容动态添加进画布中

       参考文档：https://www.w3school.com.cn/html5/canvas_drawimage.asp

          https://blog.csdn.net/a419419/article/details/79318125?utm_medium=distribute.pc_relevant_download.none-task-blog-BlogCommendFromBaidu-8.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-BlogCommendFromBaidu-8.nonecas

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function() 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);