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 相关文章推荐
jquery 事件执行检测代码
Dec 09 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
React四级菜单的实现
Apr 08 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的知识
2006/11/17 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Python实现两款计算器功能示例
2017/12/19 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python爬取个性签名的方法
2018/06/17 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
python使用udp实现聊天器功能
2018/12/10 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
python Cartopy的基础使用详解
2020/11/01 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
两则小学生的自我评价分享
2013/11/14 职场文书
班级聚会策划书
2014/01/16 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
同意迁入证明模板
2014/10/26 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书