您的位置：首页 > Web前端 > HTML5

H5底部按钮控制图片的大小远近

2016-12-22 16:58 232 查看

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

canvas{

border: 1px solid black;

display: block;

margin: 50px auto;

}

#range{

display: block;

margin: 10px auto;

width:1200px;

}

</style>

</head>

<body>

<canvas id="canvas">您的浏览器可能不支持此画布</canvas>

<input type="range" id="range" min="0.5" max="2.0" value="1.0" step="0.01"/>

<script>

var img =new Image();

var canvas=document.getElementById("canvas");

canvas.width=1200;

canvas.height =800;

var ctx=canvas.getContext("2d");

var range = document.getElementById("range");//获取滑动杆标签的domcument对象

window.onload=function(){

img.src="111.jpg";

var scale=range.value;

img.onload=function(){

getImgByRange(scale);

range.onmousemove=function(){

scale=range.value;

getImgByRange(scale);

}

}

}

//根据滑动杆绘制图片的方法

function getImgByRange(scale){

ctx.clearRect(0,0,canvas.width,canvas.height);//清空整个画布

//获取图片按照缩放比例计算得到的宽度和高度

var scaleWidth=canvas.width*scale;

var scaleHeight=canvas.height*scale;

var dx=(canvas.width-scaleWidth)/2;

var dy=(canvas.height-scaleHeight)/2;

//让图片沿着画布的宽度和高度进行显示

ctx.drawImage(img,dx,dy,scaleWidth,scaleHeight);

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航