Usage examples of drawImage (image scaling or cropping) in H5 Canvas API-H5 Tutorial-php.cn

Usage examples of drawImage (image scaling or cropping) in H5 Canvas API

巴扎黑

Release： 2018-05-24 16:29:54

Original

16919 people have browsed it

This article mainly introduces the usage examples of the drawImage() method in the HTML5 Canvas API. The drawImage() method is mainly used to scale or crop images. The article gives the usage of its coordinates and related parameters. Friends who need it You can refer to the following

drawImage() is a very key method. It can introduce images, canvases, and videos, and scale or crop them.

There are three forms of expression:

Syntax 1

JavaScript CodeCopy content to the clipboard

context.drawImage(img,dx,dy);

Grammar 2

JavaScript Code Copy the content to the clipboard

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

JavaScript Code

Copy content to clipboard

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

Let’s take a look at the coordinate sketch:

PS: Do not define

ParametersimgsxOptional. The x-coordinate position at which to start shearing. syOptional. The y-coordinate position to start shearing. swidthOptional. The width of the cropped image. sheightOptional. 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)#Next, let’s try loading an image.

Description

JavaScript Code

Copy content to clipboard

<!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>

Copy after login

Run result:

Create a photo frame: 2016325103645161.jpg (850×500) Here, we combine clip(), drawImage() and cubic Bezier curve bezierCurveTo() to add a heart-shaped photo frame to the above case~

JavaScript Code

Copy content to clipboard

<!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>

Copy after login

Run result:

Isn’t 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. 2016325103713253.jpg (300×286)

The above is the detailed content of Usage examples of drawImage (image scaling or cropping) in H5 Canvas API. For more information, please follow other related articles on the PHP Chinese website!