帆布怎么实现图片根据滑块放大缩小效果

  介绍

小编给大家分享一下帆布怎么实现图片根据滑块放大缩小效果,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

<>强效果图:

帆布怎么实现图片根据滑块放大缩小效果

图(1)原始图

帆布怎么实现图片根据滑块放大缩小效果

图(2)缩小后

帆布怎么实现图片根据滑块放大缩小效果

图(3)放大后

<强>代码如下:

& lt; ! DOCTYPE  html>   & lt; html>   ,& lt; head>   ,& lt; meta  charset=皍tf-8",/比;   ,& lt; title> & lt;/title>   ,& lt; style 类型=拔谋?css"比;   # canvas1{才能   ,,不必:3 px  3 px  10 px 黑色;   ,,}   ,& lt;/style>   ,& lt;/head>   ,& lt; body>   ,& lt; canvas  id=癱anvas1",宽度=?00“,身高=?00“祝辞& lt;/canvas>   ,& lt; input 类型=皉ange", name=皊lider", id=皊ilder" https://www.yisu.com/zixun/, value=" 0.5 " max=" 1 " min=" 0 "一步=" 0.01 "/>