绘图,前端,移动应用,计算机图形,电脑屏幕,屏幕,图像,视频,图片,canvas画布

2023-11-10 02:53:15

前言

Canvas是一个非常灵活、强大的HTML5元素，允许JavaScript脚本使用canvas绘图。您可以使用该元素创建和绘制图像、文本、形状、渐变、阴影等。canvas 可以在前端、移动应用、计算机图形等领域发挥作用。

绘制图像

在Canvas中绘制一个图像非常简单，只需要使用drawImage()方法即可。该方法的第一个参数是图像对象，第二个和第三个参数是图像在Canvas上的位置，第四个和第五个参数是图像的宽度和高度。

var image = new Image();
image.onload = function() {
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, 100, 100);
};
image.src = 'myImage.jpg';

绘制视频

您也可以使用Canvas绘制视频。要做到这一点，您需要使用video标签创建一个视频对象，然后使用requestVideoFrameCallback()方法请求视频帧。当视频帧可用时，您可以使用drawImage()方法将其绘制到Canvas上。

var video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', function() {
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');

  function drawVideoFrame() {
    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    requestVideoFrameCallback(drawVideoFrame);
  }

  drawVideoFrame();
});
video.src = 'myVideo.mp4';