Maison >interface Web >js tutoriel >Canvas réalise l'effet de zoom avant et arrière sur les images en fonction du curseur

Canvas réalise l'effet de zoom avant et arrière sur les images en fonction du curseur

高洛峰original: 2017-02-25 16:08:341902parcourir

Cet article présente principalement l'exemple de la façon dont Canvas peut réaliser l'effet de zoom avant et arrière sur les images en fonction du curseur. Il a une bonne valeur de référence. Jetons-y un coup d'œil avec l'éditeur ci-dessous

Rendu :

Canvas réalise leffet de zoom avant et arrière sur les images en fonction du curseur

Photo (1) Photo originale

Canvas réalise leffet de zoom avant et arrière sur les images en fonction du curseur

Image (2) Zoom arrière après

Canvas réalise leffet de zoom avant et arrière sur les images en fonction du curseur

Image (3) Après zoom avant

le code est le suivant :

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style type="text/css">
  #canvas1{
  box-shadow: 3px 3px 10px black;
  }
 </style>
 </head>
 <body>
 <canvas id="canvas1" width="500" height="500"></canvas>
 <input type="range" name="slider" id="silder" value="0.5" max="1" min="0" step="0.01"/>
 </body>
 <script type="text/javascript">
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");
 var slider = document.getElementById("silder");
 var scale = slider.value;
 creatImg(scale);
  slider.onmousedown = function() {
  slider.onmousemove = function () {
   scale = slider.value;
   creatImg(scale);
  }
  }
 function creatImg (scale) {
 var myImg = new Image();
 myImg.src = "https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/902397dda144ad34ac75c376d7a20cf430ad857d.jpg"
 var imgh = canvas.height * scale;
 var imgw = canvas.width * scale;
 var x = canvas.width / 2 - imgw / 2;
 var y = canvas.height / 2 - imgh / 2
 myImg.onload = function () {
 context.clearRect(0 , 0 , canvas.width , canvas.height);
 context.drawImage(myImg , x , y ,imgw , imgh)
 }
 }
 </script>
</html>

Pour plus d'articles connexes sur toile afin d'obtenir l'effet de zoom avant et arrière sur les images en fonction du curseur, veuillez faire attention au site Web PHP 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：la toile dessine un polygoneArticle suivant：la toile dessine un polygone

Articles Liés

Voir plus