Community Learn Tools Library Leisure
search
English
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)

黄舟
Release： 2017-03-15 16:19:09
Original
1313 people have browsed it

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);
Copy after login



Grammar 2

context.drawImage(img,dx,dy,dw,dw);
Copy after login

  1. Grammar 3

##JavaScript CodeCopy content to clipboard

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

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 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>
Copy after login


## 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>
Copy after login
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!

Related labels：
HTML5 ，Canvas ，drawImage()
source：php.cn
Previous article：Code example for cropping an area image using the clip() method in the HTML5 Canvas API Next article：Detailed explanation of how to use HTML5's Geolocation API
Statement of this Website
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
Latest Articles by Author
Latest Issues
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template