Explication détaillée de la façon de dessiner des images à l'aide de Canvas en js+HTML5-js tutoriel-php.cn

Explication détaillée de la façon de dessiner des images à l'aide de Canvas en js+HTML5

巴扎黑

Libérer： 2017-09-09 10:12:34

original

1685 Les gens l'ont consulté

Cet article présente principalement en détail la méthode de dessin d'images avec le canevas HTML5 js, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage avec vous le dessin du canevas HTML5. Le code spécifique de l'image est pour votre référence. Le contenu spécifique est le suivant

demo.js

window.onload=function() {
  createcanvas();
 
  drawImage();
}
 function createcanvas() {
   var CANVAS=document.getElementById(&#39;mycanvas&#39;);
   context=CANVAS.getContext(&#39;2d&#39;);
 }
 
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

Image :