Home >Web Front-end >H5 Tutorial >Code example sharing for using drawImage() method in HTML5 Canvas API (picture)

Code example sharing for using drawImage() method in HTML5 Canvas API (picture)

黄舟Original: 2017-03-15 16:19:091332browse

This article mainly introduces the usage examples of the drawImage() method in HTML5 Canvas API. The drawImage() method is mainly used to scale the image. Or cropping, the article gives the usage of its coordinates and related parameters, friends in need can refer to it

drawImage() is a very critical method, it can introduce images, canvas, Video and scale or crop it.

There are three forms of expression:

Grammar 1

context.drawImage(img,dx,dy);

Grammar 2

context.drawImage(img,dx,dy,dw,dw);

Grammar 3

##JavaScript CodeCopy content to clipboard

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);

Let’s take a look at the coordinate sketch:

Code example sharing for using drawImage() method in HTML5 Canvas API (picture)

PS : Do not define the width and height of 5ba626b379994d53f7acf72a64f9b697 in the style, otherwise, the

picture drawn inside will be automatically enlarged or reduced. The three-parameter version is a standard form and can be used to load images, canvases or videos; the five-parameter version can not only load images but also scale the image to a specified width and height; the nine-parameter version can also be cropped in addition to scaling. See the table below for the meaning of each parameter.

ParametersimgsxOptional. The x-coordinate position at which to start shearing. syOptional. The y-coordinate position to start shearing. sOptional. The width of the cropped image. sOptional. The height of the clipped image. x Place the x coordinate position of the image on the canvas. y Place the y coordinate position of the image on the canvas. widthOptional. The width of the image to use. (Stretch or shrink the image) heightThe height of the image to use. (Stretch or shrink the image)

	Description



width
height

#Next, let’s try loading an image.

JavaScript Code复制内容到剪贴板
<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>drawImage()</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
  
        var img = new Image();   
        img.src = "./images/20-1.jpg";   
        img.onload = function(){   
            context.drawImage(img,200,50);   
        }   
    };   
</script>   
</body>   
</html>

## Running results:

Code example sharing for using drawImage() method in HTML5 Canvas API (picture) Create a photo frame:

Here, we combine

clip
() with drawImage() and cubic Bezier curve bezierCurveTo() to add a heart-shaped one to the above case Photo frame~

JavaScript Code复制内容到剪贴板
<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>绘制心形相框</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
  
        context.beginPath();   
        context.moveTo(400,260);   
        context.bezierCurveTo(450,220,450,300,400,315);   
        context.bezierCurveTo(350,300,350,220,400,260);   
        context.clip();   
        context.closePath();   
  
        var img = new Image();   
        img.src = "./images/20-1.jpg";   
        img.onload = function(){   
            context.drawImage(img,348,240,100,100);   
        }   
    };   
</script>   
</body>   
</html>

Running result:

Code example sharing for using drawImage() method in HTML5 Canvas API (picture) Is it beautiful? Okay, now that we have finished talking about the most critical masking and image cropping, in fact, drawImage() is also a crucial method in java.awt. Some people say that when making Java game interfaces, as long as you know how to use drawImage(), you can conquer the world with one move~ The same is true in Canvas. The materials provided by artists are basically pictures. At this time, drawImage() is very important for processing pictures. Even basic skills are the most important way to process pictures.

The above is the detailed content of Code example sharing for using drawImage() method in HTML5 Canvas API (picture). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Code example for cropping an area image using the clip() method in the HTML5 Canvas APINext article：Code example for cropping an area image using the clip() method in the HTML5 Canvas API

See more

Code example sharing for using drawImage() method in HTML5 Canvas API (picture)

Related articles