简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

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

黄舟
Release： 2017-03-15 16:19:09
Original
1218 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
How to prevent background image from flickering when changing I'm applying a repeating background image from the canvas to the div via JavaScript like t...
From 2023-10-20 21:38:57
0
2
344
javascript-canvas drawing I wrote a function that calls canvas's drawImage for the first time to draw part of a loca...
From 2017-07-05 10:46:27
0
1
503
html5 - canvas sometimes cannot get toDataURL data Questions: 1. I don’t know why, canvas sometimes cannot get the drawing data, but only get...
From 2017-06-06 09:53:01
0
2
628
javascript - How to set the z-index of drawImage in canvas For example, I want the first drawImage picture to be drawn above the second one. Is there...
From 2017-05-19 10:34:14
0
1
879
Image storage - php mysql stores base64 images In the HTML5 canvas, I used a third-party control for making emoticon packages, and now I ...
From 2017-05-19 10:07:42
0
4
707
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！