canvas实现图片根据滑块放大缩小效果


Posted in Javascript onFebruary 24, 2017

效果图:

canvas实现图片根据滑块放大缩小效果

图(1) 原始图

canvas实现图片根据滑块放大缩小效果

图(2) 缩小后

canvas实现图片根据滑块放大缩小效果

图(3) 放大后

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style type="text/css">
  #canvas1{
  box-shadow: 3px 3px 10px black;
  }
 </style>
 </head>
 <body>
 <canvas id="canvas1" width="500" height="500"></canvas>
 <input type="range" name="slider" id="silder" value="0.5" max="1" min="0" step="0.01"/>
 </body>
 <script type="text/javascript">
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");
 var slider = document.getElementById("silder");
 var scale = slider.value;
 creatImg(scale);
  slider.onmousedown = function() {
  slider.onmousemove = function () {
   scale = slider.value;
   creatImg(scale);
  }
  }
 function creatImg (scale) {
 var myImg = new Image();
 myImg.src = "https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/902397dda144ad34ac75c376d7a20cf430ad857d.jpg"
 var imgh = canvas.height * scale;
 var imgw = canvas.width * scale;
 var x = canvas.width / 2 - imgw / 2;
 var y = canvas.height / 2 - imgh / 2
 myImg.onload = function () {
 context.clearRect(0 , 0 , canvas.width , canvas.height);
 context.drawImage(myImg , x , y ,imgw , imgh)
 }
 }
 </script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
用js简单提供增删改查接口
May 12 Javascript
ReactRouter的实现方法
Jan 25 Javascript
详解JS中的立即执行函数
Feb 24 #Javascript
几行js代码实现自适应
Feb 24 #Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 #Javascript
JavaScript基本类型值-Number类型
Feb 24 #Javascript
AngularJS Toaster使用详解
Feb 24 #Javascript
js获取隐藏元素的宽高
Feb 24 #Javascript
js css自定义分页效果
Feb 24 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php中explode函数用法分析
2014/11/15 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Python实现TCP通信的示例代码
2019/09/09 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
基于Python实现天天酷跑功能
2021/01/06 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
单位委托书范本(3篇)
2014/09/18 职场文书
法人代表证明书格式
2014/10/01 职场文书
班主任自我评价范文
2015/03/11 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
《风筝》教学反思
2016/02/23 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
原生JS实现飞机大战小游戏
2021/06/09 Javascript
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA