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.

If we use Canvas to achieve some animation effects, we need to play it back. Many people usually use screencap tools to record and play the contents of the screen. Few people know that Canvas can be converted into video directly through Media Streams API supported by modern browsers.

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)

In this way, we can achieve the screencap effect we want.

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!