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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
javascript自定义的addClass()方法
May 28 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
vue项目强制清除页面缓存的例子
Nov 06 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
Wordpress php 分页代码
2009/10/21 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
laravel自定义分页效果
2017/07/23 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
快速入门Vue
2016/12/19 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
Python os模块介绍
2014/11/30 Python
Django自定义认证方式用法示例
2017/06/23 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python重新加载模块的实现方法
2018/10/16 Python
python实现简单的文字识别
2018/11/27 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
写自荐信三大法宝
2014/01/24 职场文书
励志演讲稿500字
2014/08/21 职场文书
给领导的感谢信范文
2015/01/23 职场文书
产品调价通知函
2015/04/20 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers