Today we mainly introduce the more powerful functions in canvas
For example, extracting the canvas content into a picture
Getting and modifying the pixel information of the canvas
And the hit detection of the canvas
First I still need to create the canvas
<canvas id="myCanvas" width=500 height=500></canvas>
The first thing to make clear is that
toDataURL() is a method of the canvas object itself rather than the environment object
This method will extract the content of the canvas into an image (base64 encoding)
Let’s take a look at how to use it
I have nothing to do with it. The canvas made a Tai Chi diagram
The js code is as follows
let canvas = document.getElementById('myCanvas'); let cxt = canvas.getContext('2d'); let l = canvas.width/2; const PI = Math.PI; cxt.translate(l, l);let createTaiChi = () => { cxt.clearRect(-l, -l, l, l); cxt.arc(0, 0, l, 0, 2*PI, 0); cxt.stroke(); cxt.beginPath(); cxt.arc(0, -l/2, l/2, -PI/2, PI/2, 0); cxt.arc(0, l/2, l/2, 3/2*PI, PI/2, 1); cxt.arc(0, 0, l, PI/2, PI*3/2, 0); cxt.fill(); cxt.beginPath(); cxt.fillStyle = '#fff'; cxt.arc(0, -l/2, l/7, 0, PI*2, 0); cxt.fill(); cxt.beginPath(); cxt.fillStyle = '#000'; cxt.arc(0, l/2, l/7, 0, PI*2, 0); cxt.fill(); }; createTaiChi();
And then cooperate with the css to make it look like a continuous rotation
#myCanvas { width: 250px; height: 250px; margin: 100px; animation: rotate 3s linear infinite; }@keyframes rotate{ 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); }}
Note that the css width and height I set here are wider than the original width of the canvas Double the height and the small size
(This can make the canvas clearer)
Next I will convert the Tai Chi diagram I drew on the canvas into a Picture
First we need to get the base64 encoding of canvas
let data = canvas.toDataURL();console.log(data);
Here we print it on the console to see what it looks like
We want to turn it into a picture ,
Just create an img tag, and then set src to data
let img = document.createElement('img'); img.src = data;document.body.appendChild(img);
At this time we will find that there is an additional static Tai Chi diagram on the page
The size is related to the width/ of the canvas The height attribute is the same 500×500
Note that this method is restricted by the same origin policy
For example, if I add a local image to the page
and then This picture is drawn into canvas
let img = document.getElementsByTagName('img')[0]; cxt.drawImage(img, 0, 0);let data = canvas.toDataURL();
The browser will report an error
If we use a local server, we can use this method
Prove that this method is acceptable Same-origin policy restrictions
Use getImageData(x, y, dx, dy) to obtain canvas pixel information
The method is called by the environment object (we are cxt here)
(also subject to the same origin policy)
The first two parameters are the starting coordinates of the image information to be obtained, and the last two parameters are the width and height of the image information to be obtained
(similar to the rectangle drawing function)
This method returns an ImageData object (including pixel information array data and width/height)
We mainly use the data attribute of this object
The size of our canvas is 500×500
So getting all the pixel information on the canvas is like this
console.log(cxt.getImageData(0, 0, 500, 500).data);
We found that the length of this array is 100w
If our canvas has four pixels
Each pixel information is divided into four values of RGBA
Then the array length should be 4×4 = 16
They are
1R 1G 1B 1A
2R 2G 2B 2A
3R 3G 3B 3A
4R 4G 4B 4A
Our canvas here has a total of 500×500 = 25w pixels
So the pixel information array size is 25w×4 = 100w
We can also use the createImageData(width, height) method
Create a blank imageData object
let blankImg = cxt.createImageData(250, 250); console.log(blankImg);
Use putImageData(imgData, x, y) to overlay your image pixels on the original canvas
imgData is the imgData object, x, y are the starting coordinates of the overlay
For example, if I put the above The created 250×250 blank image covers the original canvas
cxt.putImageData(blankImg, 0, 0);
isPointInPath() can detect whether the pixel is within the path area
The usage is very simple
cxt.rect(100, 100, 300, 300);if(cxt.isPointInPath(200, 200)){ cxt.stroke();}
isPointInStroke() is used to detect whether the pixel is on the path. The usage is similar
but its compatibility is not very good
The above is HTML5 Canvas image extraction, pixel information acquisition, and hit detection. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!