Tutoriel d'image de dessin sur toile JS+H5+-js tutoriel-php.cn

Tutoriel d'image de dessin sur toile JS+H5+

php中世界最好的语言

Libérer： 2018-04-18 11:44:15

original

1130 Les gens l'ont consulté

Cette fois, je vous propose un tutoriel JS+H5+dessin sur toile, quelles sont les précautions pour dessiner des images avec JS+H5+canvas, et ce qui suit est un cas pratique. Jetons un coup d’oeil.

démo.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";
}

Copier après la connexion

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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

JS convertit la liste en une arborescence

JS permet de faire glisser les images sur le Web page

Quelle est la durée du cycle de vie des composants React Native

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!