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

JS+H5+canvas drawing picture tutorial

php中世界最好的语言
Release： 2018-04-18 11:44:15
Original
1129 people have browsed it

This time I will bring you a JS H5 canvas drawing picture tutorial, what are the precautions for drawing pictures on JS H5 canvas, the following is a practical case, let’s take a look one time.

demo.js

window.onload=function() {
  createcanvas();
  drawImage();
}
 function createcanvas() {
   var CANVAS=document.getElementById('mycanvas');
   context=CANVAS.getContext('2d');
 }
function drawImage() {
  var img=new Image();
  img.onload=function() {
    context.drawImage(img,0,0,200,200 );
  }
  img.src="img5.jpg";
}
Copy after login

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
 
  <script type="text/javascript" src="demo.js"></script>
</head>
<body>
  <canvas id="mycanvas"  width="400" hight="400" >
<span>你的浏览器不支持canvas</span>
</canvas>
</body>
</html>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS converts the list into a tree structure

JS enables pictures to be dragged on the web page

How long is the life cycle of React Native components

The above is the detailed content of JS+H5+canvas drawing picture tutorial. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
html5 javascript
source：php.cn
Previous article：js anonymous function parameter passing method Next article：How to use babel in WebStorm ES6
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
javascript - How to view console information on H5 page? I am usually used to using the console to debug js, and the alert on the mobile phone is a...
From 2017-06-30 09:54:59
0
5
763
javascript - How does the APP determine whether the embedded H5 page has crashed? If the embedded H5 page crashes, the response JS in the h5 cannot be executed, and the app...
From 2017-06-29 10:09:39
0
1
680
javascript - How to convert pages into images for sharing in WeChat mini program Hello, we are currently making a small program for business cards. How can we convert a pa...
From 2017-06-28 09:28:42
0
3
2776
javascript - How to crop images into rounded rectangles online through Html5 or original js? Is there any way in h5 or js to crop images on the web page and then cut them into rounded...
From 2017-06-08 11:03:09
0
2
511
javascript - How to convert .html files into canvas using nodejs 1. There is a page that needs to be converted into canvas. Part of the content in the page...
From 2017-06-06 09:52:47
0
1
348
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！