简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

JS+H5+canvas绘制图片教程

php中世界最好的语言
Lepaskan： 2018-04-18 11:44:15
asal
1130 orang telah melayarinya

这次给大家带来JS+H5+canvas绘制图片教程，JS+H5+canvas绘制图片的注意事项有哪些，下面就是实战案例，一起来看一下。

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";
}
Salin selepas log masuk

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>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS把list转换成树状结构

JS实现图片在网页中被拖拽

React Native组件的生命周期多长

Atas ialah kandungan terperinci JS+H5+canvas绘制图片教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
html5 javascript
sumber：php.cn
Artikel sebelumnya：js匿名函数传参方法 Artikel seterusnya：WebStorm ES6怎么使用babel
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
javascript - Bagaimana untuk melihat maklumat konsol pada halaman H5? Saya biasanya digunakan untuk menggunakan konsol untuk menyahpepijat js, dan amaran pada t...
daripada 2017-06-30 09:54:59
0
5
763
javascript - Bagaimanakah APP menentukan sama ada halaman H5 terbenam telah ranap? Jika halaman H5 terbenam ranap, respons JS dalam h5 tidak boleh dilaksanakan dan apl tidak...
daripada 2017-06-29 10:09:39
0
1
680
javascript - Bagaimana untuk menukar halaman kepada imej untuk dikongsi dalam program mini WeChat Helo, kami sedang membuat program kecil untuk kad perniagaan Bagaimana kami boleh menukar ...
daripada 2017-06-28 09:28:42
0
3
2776
javascript - Bagaimana untuk memangkas imej menjadi segi empat tepat bulat dalam talian melalui Html5 atau js asal? Adakah terdapat sebarang cara dalam h5 atau js untuk memangkas imej pada halaman web dan k...
daripada 2017-06-08 11:03:09
0
2
511
javascript - Cara menukar fail .html kepada kanvas menggunakan nodejs 1. Terdapat halaman yang perlu ditukar menjadi kanvas. Sebahagian daripada kandungan dalam...
daripada 2017-06-06 09:52:47
0
1
348
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！