您的位置：首页 > 其它

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

2015-09-06 09:42 260 查看

原文链接：https://www.geek-share.com/detail/2652468871.html

<!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.οnlοad=function(){
   canvas.width=1024
   canvas.height=683
   var scale=slider.value

   image.src="lg-1.jpg"
   image.οnlοad=function(){

    drawImageByScale(scale)
    slider.οnmοusemοve=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>

转载于:https://www.geek-share.com/detail/2652468871.html

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

标签：

相关文章推荐

新的分享

章节导航