suchen

Heim >Web-Frontend >js-Tutorial >Canvas realisiert den Effekt des Vergrößerns und Verkleinerns von Bildern entsprechend dem Schieberegler

Canvas realisiert den Effekt des Vergrößerns und Verkleinerns von Bildern entsprechend dem Schieberegler

高洛峰
高洛峰Original
2017-02-25 16:08:341904Durchsuche

In diesem Artikel wird hauptsächlich das Beispiel der Leinwand vorgestellt, um den Effekt des Vergrößerns und Verkleinerns von Bildern gemäß dem Schieberegler zu erzielen. Schauen wir uns das mit dem Editor an.

Rendering:

Canvas realisiert den Effekt des Vergrößerns und Verkleinerns von Bildern entsprechend dem Schieberegler

Bild (1) Originalbild

Canvas realisiert den Effekt des Vergrößerns und Verkleinerns von Bildern entsprechend dem Schieberegler

Bild (2) Verkleinern nach

Canvas realisiert den Effekt des Vergrößerns und Verkleinerns von Bildern entsprechend dem Schieberegler

Bild (3) Nach dem Vergrößern

Der Code lautet wie folgt: 

<!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>

Für weitere verwandte Artikel auf Leinwand, um den Bildvergrößerungs- und Verkleinerungseffekt basierend auf dem Schieberegler zu realisieren, achten Sie bitte darauf zur chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Canvas zeichnet PolygoneNächster Artikel：Canvas zeichnet Polygone

In Verbindung stehende Artikel

Mehr sehen