您的位置：首页 > 其它

关于canvas制作图片放大缩小效果

2015-09-06 00:00 399 查看

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>canvas</title>
<style>
*{margin: 0; padding: 0;}

</style>
</head>

<body style="background: #000;">
<canvas id="canvas" width="" height="" style="display: block; margin: 0 auto; border: 1px solid #ddd;">
您的浏览器尚不支持canvas
</canvas>
<input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display: block; margin: 20px auto; width: 800px;" />

<canvas id="watermark-canvas" width="" height="" style="display:none; margin: 0 auto; border: 1px solid #ddd;">
您的浏览器尚不支持canvas
</canvas>

<script type="text/javascript">
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");
var slider=document.getElementById('scale-range');
var image=new Image();

var watermarkCanvas=document.getElementById('watermark-canvas');
var watermarkContext=watermarkCanvas.getContext('2d');

window.onload=function(){
canvas.width=1024
canvas.height=683
var scale=slider.value

image.src="lg-1.jpg"
image.onload=function(){

drawImageByScale(scale)
slider.onmousemove=function(){
scale=slider.value
drawImageByScale(scale)
}
}

}

function drawImageByScale(scale){
var imageWidth=1024*scale
var imageHeight=683*scale

var dx=canvas.width / 2-imageWidth / 2;
var dy=canvas.height / 2-imageHeight / 2;

context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, dx, dy, imageWidth,imageHeight);
context.drawImage(watermarkCanvas, canvas.width-watermarkCanvas.width, canvas.height-watermarkCanvas.height)
}
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航