Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use HTML5 Canvas". In daily operation, I believe many people have doubts about how to use HTML5 Canvas. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use HTML5 Canvas"! Next, please follow the editor to study!

Image source

The most common way to draw on canvas is to use Javascript Image objects. The supported source image format depends on the support of the browser, however, some typical image formats (png,jpg,gif, etc.) are basically no problem.

Images can be grabbed from elements already loaded in DOM, or they can be created instantly on demand.

/ / grab the existing pictures on the page. Var myImage = document.getElementById ('myimageid'); / or create a new picture. MyImage = new Image (); myImage.src = 'image.png'

In the current version of most browsers that support canvas tags, if you want to draw an image before it has been loaded, nothing will happen. That is, if you want to draw a picture, you need to wait for it to be fully loaded. You can use the onload function of the picture object to judge.

/ / Create an image. MyImage = new Image (); myImage.onload = function () {/ / Draw image. } myImage.src = 'image.png'

In all the examples below, our image source will use this 256 × 256 gorilla.

Basic painting

In the most basic drawing operation, all you need is the location (x and y coordinates) where you want the image to appear. The position of the image is judged relative to its upper left corner. Using this method, the image can be simply painted on the canvas in its original size.

DrawImage (image, x, y)

DrawImage (image, x, y) var canvas = document.getElementById ('myCanvas'); var ctx = canvas.getContext (' 2d'); ctx.drawImage (myImage, 50,50); ctx.drawImage (myImage, 125,125); ctx.drawImage (myImage, 210,210)

Zoom and resize

To change the size of the image, you need to use the overloaded drawImage function to provide it with the desired width and height parameters.

DrawImage (image, x, y, width, height) var canvas = document.getElementById ('myCanvas'); var ctx = canvas.getContext (' 2d'); ctx.drawImage (myImage, 50,50,100,100); ctx.drawImage (myImage, 125,125,200,50); ctx.drawImage (myImage, 210,210,500,500)

This example demonstrates how to draw an image smaller than the original image, an image with different aspect ratio, and an image larger than the original image.

Image cropping

The function of a drawImage method is to crop an image.

DrawImage (image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

There are a lot of parameters, but basically you can think of it as taking a rectangular area from the original image and drawing it into the target area on the canvas.

Var canvas = document.getElementById ('myCanvas'); var ctx = canvas.getContext (' 2d'); ctx.drawImage (myImage, 0,0,50,50,25,25,100,100); ctx.drawImage (myImage, 125,125,100,125,125,150,150); ctx.drawImage (myImage, 80,80,100,100,250,250,220,220). At this point, the study of "how to use HTML5 Canvas" is over. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.