html5--canvas学习

ゝ一纸荒年。 2022-08-22 14:23 218阅读 0赞

HTML5 canvas 元素用于图形的绘制，canvas 标签只是图形容器，您必须使用脚本(通常是JavaScript)来绘制图形。  
1.创建一个画布

//设置大小和边框
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

2.使用JavaScript来绘制图像  
![这里写图片描述][20160613213640101]

3.路径  
![这里写图片描述][20160613213738025]

//绘制线条
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);//线条开始的坐标
    ctx.lineTo(200,100);//线条结束的坐标
    ctx.stroke();

![这里写图片描述][20160613213854214]

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

![这里写图片描述][20160613213931277]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";//设置字体
    ctx.fillText("Hello World",10,50);//实心文本
    ctx.strokeText("Hello World",10,50);//空心文本

4.把一副图像放置到画布上

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);

5.  
这是一段实时在画布上显示视频的代码，像两个窗口在同时播放。  
第一个窗口是实时的播放一段视频。  
第二个窗口是没20毫秒在画布绘图一次，看起来也是一段连续的视频播放，当暂停或者视频结束时，取消定时绘图。

<!DOCTYPE html>
    <html>
    <body>
    
    <p>要使用的视频：</p>
    
    <video id="video1" controls width="270" autoplay>
    <source src="video1.mp4" type='video/mp4'>
    </video>
    
    <p>画布（每 20 毫秒，代码就会绘制视频的当前帧）：</p>
    
    <canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script> 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);//如果是播放，每20毫秒绘图一次 v.addEventListener('pause',function() { window.clearInterval(i);},false);//视频暂停，取消定时绘图 v.addEventListener('ended',function() { clearInterval(i);},false); //视频结束，取消定时绘图 </script>
    </body>
    </html>

[20160613213640101]: /images/20220722/6f02e264f43b427e98836aa0752c6c65.png
[20160613213738025]: /images/20220722/53f4d1adbec947feb27bb4c813afd986.png
[20160613213854214]: /images/20220722/9bb371cf6a81452bb7101c6abfde21f4.png
[20160613213931277]: /images/20220722/da271c3ed3724766ad8120e2593860ef.png