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实现简单易懂的图片展示小例子
Nov 21 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
Vue数据绑定简析小结
May 07 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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学习之流程控制实现代码
2011/06/09 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
php中请求url的五种方法总结
2017/07/13 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
Python实现字典的key和values的交换
2015/08/04 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python 读取修改pcap包的例子
2019/07/23 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Python递归实现打印多重列表代码
2020/02/27 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
教师自我鉴定范文
2013/11/10 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
多媒体教室标语
2014/06/26 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android