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 相关文章推荐
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
简单的分页代码js实现
May 17 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
JavaScript实现多层颜色选项卡嵌套
Sep 21 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
redis 队列操作的例子(php)
2012/04/12 PHP
Open and Print a Word Document
2007/06/15 Javascript
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
js a标签点击事件
2017/03/30 Javascript
详解JS模块导入导出
2017/12/20 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
python 远程统计文件代码分享
2015/05/14 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
python实现黑客字幕雨效果
2018/06/21 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python 获取计算机的网卡信息
2021/02/18 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
应届毕业生就业自荐信
2013/10/26 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
毕业横幅标语
2014/10/08 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL