<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="750" height="420"></canvas></br>
<input type="range" name="" id="slider" min="0.5" max="3.0" step="0.01" value="1.0" />
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var slider = document.getElementById("slider");
var img = new Image();
window.onload = function(){
var scale = slider.value;
img.src = "img/a11.jpg";
img.onload = function(){
// ctx.drawImage(img,0,0,canvas.width,canvas.height);
drawImageByScale(scale);
slider.onmousemove = function(){
scale = slider.value;
drawImageByScale(scale);
}
}
}
function drawImageByScale(scale){
var imgWidth = 750 * scale;
var imgHeight = 420 * scale;
// var sx = imgWidth / 2 - canvas.width / 2;
// var sx = imgHeight / 2 - canvas.height / 2;
// ctx.drawImage(img,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height);
var dx = canvas.width / 2 - imgWidth / 2;
var dy = canvas.height / 2 - imgHeight / 2;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,dx,dy,imgWidth,imgHeight);
}
</script>
</body>
</html>
扫一扫
1571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
