Canvas is a new canvas in HTML5, so how does HTML5 canvas draw images? This article will introduce to you the method of drawing images on HTML5 canvas. Let’s take a look at the specific content.
Let’s look directly at the code example first
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function onImageLoad() {
context.drawImage(img, 128, 40);
}
img.src = 'img/flower.jpg';
}
</script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
<canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
<div>Canvas Demo</div>
</body>
</html>Description: When drawing on the canvas, obtaining the context of the canvas is a common process.
Prepare the image to be drawn on the canvas. Create an Image object.
var img = new Image();
To draw an image on the canvas use the drawImage() method of the Canvas context. The X and Y coordinates are given to draw the Image object as the first argument and the image as the second third argument. Since loading the Image object's image is handled asynchronously, it must be ready after the Image object's image is ready. Draw the image. Therefore, we implement drawing processing on the onload event of the Image object, and finally process the settings of the source image
img.onload = function onImageLoad() {
context.drawImage(img, 128, 40);
}
img.src = 'img/flower.jpg';Running results
Open the HTML file in a Web browser. The result is shown below, the image is drawn on the canvas.
Note: In the case of the following code, there is no guarantee that the image of the Image object will be read when drawImage is executed. So it might happen while displaying the image. Drawing images should be implemented on the onload of the Image object.
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'img/flower.jpg';
context.drawImage(img, 128, 40);
}
</script>The above is the detailed content of How to draw images in HTML5 canvas. For more information, please follow other related articles on the PHP Chinese website!
How do I use viewport meta tags to control page scaling on mobile devices?Mar 13, 2025 pm 08:00 PMThe article discusses using viewport meta tags to control page scaling on mobile devices, focusing on settings like width and initial-scale for optimal responsiveness and performance.Character count: 159
How to Use HTML5 Forms for User Input?Mar 10, 2025 pm 02:59 PMThis article explains how to create and validate HTML5 forms. It details the <form> element, input types (text, email, number, etc.), and attributes (required, pattern, min, max). The advantages of HTML5 forms over older methods, incl
How to Add Audio to My HTML5 Website?Mar 10, 2025 pm 03:01 PMThis article explains how to embed audio in HTML5 using the <audio> element, including best practices for format selection (MP3, Ogg Vorbis), file optimization, and JavaScript control for playback. It emphasizes using multiple audio f
How do I handle user location privacy and permissions with the Geolocation API?Mar 18, 2025 pm 02:16 PMThe article discusses managing user location privacy and permissions using the Geolocation API, emphasizing best practices for requesting permissions, ensuring data security, and complying with privacy laws.
How do I use the HTML5 Page Visibility API to detect when a page is visible?Mar 13, 2025 pm 07:51 PMThe article discusses using the HTML5 Page Visibility API to detect page visibility, improve user experience, and optimize resource usage. Key aspects include pausing media, reducing CPU load, and managing analytics based on visibility changes.
How to Create Interactive Games with HTML5 and JavaScript?Mar 10, 2025 pm 06:34 PMThis article details creating interactive HTML5 games using JavaScript. It covers game design, HTML structure, CSS styling, JavaScript logic (including event handling and animation), and audio integration. Essential JavaScript libraries (Phaser, Pi
How do I use the HTML5 Drag and Drop API for interactive user interfaces?Mar 18, 2025 pm 02:17 PMThe article explains how to use the HTML5 Drag and Drop API to create interactive user interfaces, detailing steps to make elements draggable, handle key events, and enhance user experience with custom feedback. It also discusses common pitfalls to a
How do I use the HTML5 WebSockets API for bidirectional communication between client and server?Mar 12, 2025 pm 03:20 PMThis article explains the HTML5 WebSockets API for real-time, bidirectional client-server communication. It details client-side (JavaScript) and server-side (Python/Flask) implementations, addressing challenges like scalability, state management, an
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
WebStorm Mac version
Useful JavaScript development tools
Atom editor mac version download
The most popular open source editor
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
