The plot
Context. DrawImage (image, x, y, W, h) parameters: image: specifies the image, canvas, or video to be used, x: specifies the x-coordinate position of the image on the canvas y: specifies the y-coordinate position of the image on the canvas W: specifies the width of the image h: Use the height of the image
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script>
window.onload=function(){
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
// Create an img node to draw the image to the canvas
var img = new Image();
img.src = '.. /images/2.jpeg';
img.onload=function(){
// The image is loaded and painted on the canvas
context.drawImage(img,0.0.300.200); }}</script>
</head>
<body>
<canvas width="400px" height="300px" style="background-color: rgb(183, 214, 241);"></canvas>
</body>
</html>
Copy the code
Draw the video
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script>
window.onload=function(){
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
/ / for video
var video = document.querySelector('video');
// Declare the method to draw the video
draw();
function draw(){
context.drawImage(video,0.0.400.400);
// Request animation framerequestAnimationFrame(draw); }}</script>
</head>
<body>
<canvas width="400px" height="400px" style="background-color: rgb(109, 181, 245);"></canvas>
<video src=".. / audio and Video /1.mp4" width="400px" controls></video>
</body>
</html>
Copy the code