Canvas realizes the effect of zooming in and out of pictures according to the slider-JS Tutorial-php.cn

Canvas realizes the effect of zooming in and out of pictures according to the slider

高洛峰

Release： 2017-02-25 16:08:34

Original

1885 people have browsed it

This article mainly introduces the example of canvas to achieve the effect of zooming in and out of pictures according to the slider. It has a very good reference value. Let’s take a look at it with the editor.

Effect picture:

Canvas realizes the effect of zooming in and out of pictures according to the slider

Picture (1) Original picture

Canvas realizes the effect of zooming in and out of pictures according to the slider

Picture (2) Zoom out After

Canvas realizes the effect of zooming in and out of pictures according to the slider

Picture (3) After zooming in

The code is as follows:

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

Copy after login

For more canvas-related articles on how to implement image zoom-in and zoom-out effects based on the slider, please pay attention to the PHP Chinese website!