canvas实现图片根据滑块放大缩小效果

来源：懂视网责编：小OO 时间：2020-11-27 20:24:44

canvas实现图片根据滑块放大缩小效果

效果图。图（1）原始图；图（2）缩小后；图（3）放大后；代码如下：<；，imgw .imgh) } } <；/script>；<；/html>；。更多canvas实现图片根据滑块放大缩小效果相关文章请关注PHP中文网。

推荐度：

点击下载本文 文档为doc格式

导读效果图。图（1）原始图；图（2）缩小后；图（3）放大后；代码如下：<；，imgw .imgh) } } <；/script>；<；/html>；。更多canvas实现图片根据滑块放大缩小效果相关文章请关注PHP中文网。

本文主要介绍了canvas实现图片根据滑块放大缩小效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧

效果图：

canvas实现图片根据滑块放大缩小效果

图（1）原始图

canvas实现图片根据滑块放大缩小效果

图（2）缩小后

canvas实现图片根据滑块放大缩小效果

图（3）放大后

代码如下：

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

更多canvas实现图片根据滑块放大缩小效果相关文章请关注PHP中文网！

canvas实现图片根据滑块放大缩小效果

推荐度：

点击下载本文 文档为doc格式

标签：放大缩放效果图

热门焦点

canvas实现图片根据滑块放大缩小效果

canvas实现图片根据滑块放大缩小效果

canvas实现图片根据滑块放大缩小效果

最新推荐

猜你喜欢

热门推荐