Maison > Article > interface Web > Tutoriel d'image de dessin sur toile JS+H5+

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

php中世界最好的语言original: 2018-04-18 11:44:151168parcourir

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";
}

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：méthode de passage des paramètres de fonction anonyme jsArticle suivant：méthode de passage des paramètres de fonction anonyme js

Articles Liés

Voir plus