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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
YII框架http缓存操作示例
2019/04/29 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
node.js中axios使用心得总结
2017/11/29 Javascript
js中this对象用法分析
2018/01/05 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
Python中的列表知识点汇总
2015/04/14 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
表扬通报怎么写
2015/01/16 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS