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

作者：z5895451 时间：2024-04-16 09:52:15　

效果图：

图（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>

来源：http://www.qdfuns.com/notes/41622/5381b36deb5bb107f536c1699b4b9446.html

标签：canvas,图片

投稿

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

猜你喜欢

Python+Appium自动化操作微信的教程分享

Python+drawpad实现CPU监控小程序

Django celery异步任务实现代码示例

支持PyTorch的einops张量操作神器用法示例详解

Python的字符串操作简单实例

python实现简单ftp客户端的方法

从0到1搭建后端架构的演进(MVC,服务拆分,微服务,领域驱动)

ant design vue datepicker日期选择器中文化操作

JavaScript 日期下拉选择器

CSS制作滑动折叠的文字效果

python 代码运行时间获取方式详解

Python使用scipy.fft进行大学经典的傅立叶变换

WEB页面工具语言XML产生背景

以数据库字段分组显示数据的sql语句(详细介绍)

python 如何求N的阶乘

优化 MySQL 语句的十个建议

Python中用Spark模块的使用教程

python实现输出一个序列的所有子序列示例

浅谈flask中的before_request与after_request

Python导出DBF文件到Excel的方法