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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
javascript实现前端分页效果
Jun 24 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 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
PHP执行速率优化技巧小结
2008/03/15 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
Python素数检测的方法
2015/05/11 Python
python实现教务管理系统
2018/03/12 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python如何调用外部系统命令
2019/08/07 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
几个人围成一圈的问题
2013/09/26 面试题
党校自我鉴定范文
2013/10/02 职场文书
酒吧创业计划书
2014/01/18 职场文书
应届护士求职信范文
2014/01/26 职场文书
债务纠纷委托书
2014/08/30 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
bat批处理之字符串操作的实现
2022/03/16 Python