A brief discussion on what Canvas can do? The use of Canvas

The content of this article is to briefly talk about what Canvas can do? The use of Canvas. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

canvasWhat can it do?

Canvas is a new element in HTML5. You can use javascript to draw graphics, icons, and Any other visual images. It can also be used to create picture effects and animations. If you master the complete set of commands, you can create rich web applications with canvas. If you want to use canvas well, you should first master javascript well. [Recommended related video tutorials: JavaScript tutorial]

canvastag

<canvas width="400" height="300">
</canvas>

Of course you can also set it through css Certainly! If you do not set the width and height, the default width and height is 300*150.

For lower version browsers, you put the information you need to feedback between the canvas tags.

<canvas width="400" height="300">
    <p>你想看我，就升级浏览器吧！</p>
</canvas>

Get the context, all your painting operations are in the context, currently only supports 2d.

window.onad=function(){    
     var canvas = document.getElementById("myCanvas");    
     var context= can.getContext("2d");
}

For RetinaDisplay

Let the canvas be clearly displayed on Retina and standard definition displays is very simple, just pass the screen Just multiply the ratio determined by the pixel density by the canvas. First, you need to understand how pixel values ​​are stored on a canvas.

Backing storage is the color value of each pixel that stores data on the canvas. Our goal is to have one pixel in the back store for every pixel displayed on the canvas. Before pixels are pushed to the screen, their values ​​are calculated here. However, the number of pixels represented in the backing memory may not equal the number of pixels pushed to the screen. On Retina devices, the width and height of the canvas are doubled to maintain a consistent size and position relative to other HTML elements, and as a result, it stretches and obscures its content. To counteract this stretch, you need to double the width and height of the back storage when appropriate.

If you are processing raster images or video data, find out how to further optimize the canvas for "pixel processing for Retina displays." Since in any case a larger canvas may not be beneficial, you need to choose Optimization Your Canvas is for Retina devices. First, make sure the monitor rendering your canvas is indeed Retina-ready. If so, scale the backing store according to the device's pixel ratio.

On the one hand retina devices have a pixel ratio of 2 because there is a 2:1 ratio of display pixels to backing storage pixels in the x and y directions. Standard definition monitors, on the other hand, map 1 backing storage pixel to 1 display pixel, so their device pixel ratio will always be 1.

In JavaScript, you can determine the fallback ratio factors. First, check whether the browser has defined window.devicePixelRatio. If the device's pixel ratio is greater than 1, the user is on a Retina display. The code to determine the appropriate backup ratio is as follows:

window.onload=function(){
       var canvas = document.getElementById("myCanvas");
      var context= canvastContext("2d");
       var scaleFactor = backingScale(ctx);
       if (scaleFactor > 1) {
              canvas.width = canvas.width * scaleFactor;
              canvas.height = canvas.height * scaleFactor;
              // update the context for the new canvas scale
              var context = canvas.getContext("2d");
       }
}
 function backingScale(context) {
              if ('devicePixelRatio' in window) {
                     if (window.devicePixelRatio > 1) {
                            return window.devicePixelRatio;
                     }
              }
              return 1;

}

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of A brief discussion on what Canvas can do? The use of Canvas. For more information, please follow other related articles on the PHP Chinese website!