首页 > 代码库 > HTML5:使用Canvas和Input range控件放大缩小图片
HTML5:使用Canvas和Input range控件放大缩小图片
引自:http://blog.csdn.net/ClementAD/article/details/48938261
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片缩放</title> </head> <body style="background: black;"> <canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa;"> 你的浏览器不支持canvas。 </canvas> <input type="range" id="slider" min="0.5" max="3.0" step="0.01" value="http://www.mamicode.com/1.0" style="display: block;margin: 20px auto;width: 800px;"/> </body> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var slider = document.getElementById("slider"); var image = new Image(); //定义一个Image对象 window.onload = function(){ canvas.width = 1200; canvas.height = 800; image.src="http://www.mamicode.com/http://www.xingbo.tv/static/images/keyImg.png"; //加载图片 //需要等image load完再把它画到canvas中,不然的话可能有不良后果 image.onload = function() { drawImageByScale(slider.value); slider.onmousemove = function(){ drawImageByScale(slider.value); }; }; /** * 根据一个缩放比例在画布上画一个图像 * @param {float} scale 缩放比例 */ function drawImageByScale(scale){ //根据图片的缩放比例调整图片的长宽 var imageWidth = canvas.width * scale; var imageHeight = canvas.height * scale; //画布上的起始点:画布的大小一半减去图像大小的一半。可以为负数,表示在左上角的外面。 var dx = canvas.width/2 - imageWidth/2; var dy = canvas.height/2 - imageHeight/2; //清空画布 context.clearRect(0, 0, canvas.width, canvas.height); //把image画到canvas中,dx、dy表示起始点坐标 context.drawImage(image, dx, dy, imageWidth, imageHeight); } }; </script> </html>
HTML5:使用Canvas和Input range控件放大缩小图片
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。