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

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

效果图：

图(1) 原始图

图(2) 缩小后

图(3) 放大后

代码如下：

#canvas1{

box-shadow: 3px 3px 10px black;

}

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 = "/-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)

}

}

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

发布php中文网，转载请注明出处，感谢您的尊重！