网络编程
位置：首页>> 网络编程>> JavaScript>> canvas实现图片根据滑块放大缩小效果

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

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

标签：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>

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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com