How to convert the Canvas drawing process into video
This article focuses on "how to turn the Canvas drawing process into a video". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to turn the Canvas drawing process into video.
The Canvas object supports the captureStream method, which returns a MediaStream object. Then, we can create a MediaRecorder from this object to record the screenshot.
Let's look at a simple example.
Record video
First, let's write a very simple Canvas animation effect, the code is as follows:
Const canvas = document.querySelector ('canvas')
Const ctx = canvas.getContext ('2d')
Const {width, height} = canvas
Ctx.fillStyle = 'red'
Function draw (rotation = 0) {
Ctx.clearRect (0, 0, 1000, 1000)
Ctx.save ()
Ctx.translate (width / 2, height / 2)
Ctx.rotate (rotation)
Ctx.translate (- width / 2,-height / 2)
Ctx.beginPath ()
Ctx.rect (200,200,200,200)
Ctx.fill ()
Ctx.restore ()
}
Function update (t) {
Draw (t / 500)
RequestAnimationFrame (update)
}
Update (0)
This effect enables a 200-wide-high rectangle to rotate in the center of the canvas.
Next, let's record this effect. Suppose we record a video for 6 seconds. First, we need to get the MediaStream object:
Const stream = canvas.captureStream ()
Then, we create a MediaRecorder:
Const recorder = new MediaRecorder (stream, {mimeType: 'video/webm'})
Then we can register the ondataavailable event and record the data:
Const data = []
Recorder.ondataavailable = function (event) {
If (event.data & & event.data.size) {
Data.push (event.data)
}
}
In the onstop event, we write the data to the video tag on the page through the Blob object.
Recorder.onstop = () = > {
Const url = URL.createObjectURL (new Blob (data, {type: 'video/webm'}))
Document.querySelector ("# videoContainer"). Style.display = "block"
Document.querySelector ("video"). Src = url
}
If you don't understand Blob objects, you can read this article.
Finally, we started recording the video and set it to stop after 6 seconds:
Recorder.start ()
SetTimeout () = > {
Recorder.stop ()
}, 6000)
At this point, I believe you have a deeper understanding of "how to turn the Canvas drawing process into video". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
