canvas drawing pictures

In HTML5, in addition to using canvas to draw vector graphics, we can also draw existing image files on the canvas "canvas".

CanvasRenderingContext2DFirst, let's take a look at the main properties and methods of objects that are needed to draw image files using canvas :

①drawImage(mixed image, int x, int y)

Starting from the specified coordinate point on the canvas, draw the entire image according to the original size of the image. Here image can be an Image object or an Canvas object (the same below).

②drawImage(mixed image, int x, int y, int width, int height)

Starting at the specified coordinate point on the canvas, draw the entire image at the specified size ( width and height ), and the image will be automatically scaled accordingly according to the specified size.

③drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)

Draw the partial image of the specified image (imageX, imageY) ( the imageWidth rectangle with the upper left corner, the width and the height ) into the rectangular area with the coordinates of the upper left corner, the width and the height in the canvas imageHeight (canvasX,canvasY) canvasWidth canvasHeight

To draw an image in canvas, we can use a drawImage()method called , but this method has three different variants, each of which is allowed to receive not only a different number of parameters, but also a different meaning of the parameters.

Here, we exemplify the above three variants separately.

First, drawImage()the first variant we use draws Google's logo image on canvas (original size is 550 x 190)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas image drawing example</title>
</head>
<body>

<!-- Add canvas tag with red border for easy viewing on the page-->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
Your browser does not support the canvas tag.
</canvas>

<script type="text/javascript">
//Get the Canvas object (canvas)
var canvas = document.getElementById("myCanvas");
//Simply detect whether the current browser supports Canvas objects, so as to avoid syntax errors in some browsers that do not support html5
if(canvas.getContext){  
    //Get the corresponding CanvasRenderingContext2D object (brush)
    var ctx = canvas.getContext("2d");
    
    //Create a new image object
    var img = new Image();
    // Specify the URL of the image
    img.src = "http://www.365mini.com/image/google_logo.png";
    //The browser draws the image after loading the image
    img.onload = function(){
        //Draw the image with the coordinates (10,10) on the Canvas canvas as the starting point
        ctx.drawImage(img, 10, 10);             
    };
}
</script>
</body>
</html>

The corresponding display effect is as follows:

Use canvas to draw Google's logo image

Since Google's logo image is too large and exceeds the size range of the canvas, only a part of the image can be displayed. At this point, we use the second variant to shrink the Google logo image to the specified width and height and draw it into the canvas.

<script type="text/javascript">
//Get the Canvas object (canvas)
var canvas = document.getElementById("myCanvas");
//Simply detect whether the current browser supports Canvas objects, so as to avoid syntax errors in some browsers that do not support html5
if(canvas.getContext){  
    //Get the corresponding CanvasRenderingContext2D object (brush)
    var ctx = canvas.getContext("2d");
    
    //Create a new image object
    var img = new Image();
    // Specify the URL of the image
    img.src = "http://www.365mini.com/image/google_logo.png";
    //The browser draws the image after loading the image
    img.onload = function(){
        //Draw the image with the coordinates (10,10) on the Canvas canvas as the starting point
        //The width and height of the image are scaled to 350px and 100px respectively
        ctx.drawImage(img, 10, 10, 350, 100);             
    };
}
</script>

我们将Google的logo图像进行缩放后，此时就可以在canvas中看到整个图像了：

canvas-draw-image-2.png

最后，我们使用第三个方法变体将Google logo中的"Goo"部分图像绘制到canvas中("Goo"部分的图像大小可以使用Photoshop等工具测量得出，这里直接使用测量后的结果)。

<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){  
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");
    
    //创建新的图片对象
    var img = new Image();
    //指定图片的URL
    img.src = "http://www.365mini.com/image/google_logo.png";
    //浏览器加载图片完毕后再绘制图片
    img.onload = function(){
        /*
         * 将图像左侧的"Goo"部分(即以坐标(0,0)为左上角坐标、宽度为332px、高度为190px的部分图像)
         * 绘制到canvas中以坐标(10,10)为左上角、宽度为332px、高度为190px的矩形区域
         *
         * canvas绘制图像的目标区域的宽度和高度与截取的部分图像尺寸保持一致，
         * means that no scaling is performed, and part of the image is captured at the original size
         */        
        ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190);             
    };
}
</script>

At this point, we can see the "Goo" partial image displayed in the canvas:

Drawing the Google logo using canvas

canvas drawing pictures

Guess you like