canvas实现图片根据滑块放大缩小效果
效果图：
图（1） 原始图
图（2） 缩小后
图（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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍Android手势滑动实现ImageView缩放图片大小，包括了Android手势滑动实现ImageView缩放图片大小的使用技巧和注意事项，需要的朋友参考一下 本文推出了两种Android手势实现ImageView缩放图片大小的方法，分享给大家供大家参考，具体内容如下 方法一： 将以下代码写到MulitPointTouchListener.java中，然后对你相应的图片进行OnTo
-
本文向大家介绍Android实现手势滑动多点触摸放大缩小图片效果，包括了Android实现手势滑动多点触摸放大缩小图片效果的使用技巧和注意事项，需要的朋友参考一下 网上文章虽多，但是这种效果少之又少，我真诚的献上以供大家参考 实现原理：自定义ImageView对此控件进行相应的layout(动态布局). 这里你要明白几个方法执行的流程： 首先ImageView是继承自View的子类. onLayo
-
本文向大家介绍原生js实现图片放大缩小计时器效果，包括了原生js实现图片放大缩小计时器效果的使用技巧和注意事项，需要的朋友参考一下 知识要点 var fn=setInterval(function(){},1000) 每隔1秒执行一次函数 clearInterval(fn) 清除计时器 判断当图片放大缩小到固定大小时，清除计时器 完整代码 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作
-
本文向大家介绍Android实现旋转，放大，缩小图片的方法，包括了Android实现旋转，放大，缩小图片的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Android实现旋转，放大，缩小图片的方法。分享给大家供大家参考，具体如下： 项目中需要做到一个预览图片的功能 最初设想自定义个一个view，在onDraw中用的是生成新的Bitmap，来放大，缩小 但由于手机内存是有限制的，在放大
-
问题内容： 我正在尝试动态缩放文本，以将其放置在尺寸不同但已知的图像上。文本将用作水印。有什么方法可以根据图像尺寸缩放文本？我并不需要文字占据整个表面区域，而只是要使其足够可见即可，以使其易于识别且难以删除。我正在使用Python Imaging Library版本1.1.7。在Linux上。 我希望能够设置文本大小与图像大小的比率，比如说1/10大小。 我一直在寻找字体大小属性来更改大小，但是我
-
本文向大家介绍微信小程序实现通过双向滑动缩放图片大小的方法，包括了微信小程序实现通过双向滑动缩放图片大小的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了微信小程序实现通过双向滑动缩放图片大小的方法。分享给大家供大家参考，具体如下： 在做小程序开发的过程中，后端传来一张图片地图，需要实现双手指滑动，使图片缩放，最终得出了一下代码： js ： 然后将新获得的图片宽度和高度赋值给图片即可实
-
本文向大家介绍Unity shader实现自由放大缩小效果，包括了Unity shader实现自由放大缩小效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Unity shader实现自由放大缩小效果的具体代码，供大家参考，具体内容如下 代码： 以下实现的shader代码： 主要的内容还是在frag中。 下面是挂在摄像机上的脚本： 以上就是本文的全部内容，希望对大家的学习有所帮助，
-
本文向大家介绍javascript实现获取图片大小及图片等比缩放的方法，包括了javascript实现获取图片大小及图片等比缩放的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript实现获取图片大小及图片等比缩放的方法。分享给大家供大家参考，具体如下： 获取图片大小： 图片等比缩放： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript