Canvas——滑杆操控图片放大缩小

原创 2015年08月24日 15:08:30
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="background: black;">

    <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
    您的浏览器尚不支持canvas
    </canvas>
    <input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:800px"/>

    <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        var slider = document.getElementById("scale-range")
        var image = new Image()

        window.onload = function(){

            canvas.width = 1152
            canvas.height = 768

            var scale = slider.value
            image.src = "img-lg.jpg"
            image.onload = function(){
                drawImageByScale( scale )

//                slider.onchange = function(){
//                    scale = slider.value
//                    drawImage( image , scale )
//                }

                slider.onmousemove = function(){
                    scale = slider.value
                    drawImageByScale( scale )
                }
            }


        }

        function drawImageByScale( scale ){

            var imageWidth = 1152 * scale
            var imageHeight = 768 * scale

            //var sx = imageWidth / 2 - canvas.width / 2
            //var sy = imageHeight / 2 - canvas.height / 2

            //context.drawImage( image , sx , sy , canvas.width , canvas.height , 0 , 0 , canvas.width , canvas.height )
            x = canvas.width /2 - imageWidth / 2
            y = canvas.height / 2 - imageHeight / 2

            context.clearRect( 0 , 0 , canvas.width , canvas.height )
            context.drawImage( image , x , y , imageWidth , imageHeight )
        }


    </script>
</body>
</html>




版权声明:本文为博主原创文章,未经博主允许不得转载。

canvas之图形的变化(平移,缩放,旋转)

1、保存与恢复canvas状态 ctx.save();暂时将当前的状态保存到堆中 ctx.restore();该方法用于将上一个保存的状态从堆中再次取出,恢复该状态的所有设置。 ...
  • u014538198
  • u014538198
  • 2015年09月18日 12:29
  • 2448

Canvas---Canvas图像处理、图片查看器、图像缩放功能的实现。

模仿手机图像查看软件用canvas实现一个图像查看器。 目前实现: 利用将图像起点绘制到canvas之外的技术实现了图像的缩放。 包括,图像自适应、图像放大缩小 下一步准备实现: 鼠标拖动图像 截图:...
  • MIKUScallion
  • MIKUScallion
  • 2015年01月31日 21:43
  • 3002

Canvas的使用,放大缩小的自定义布局,不同的位置不同的点击事件

从一接触这个项目就开始找实现的各种方式,首先说一下需求: 1、一个可以缩放的背景,可以向背景中加入新的图片; 2,加入的图片可以触发事件,图片要随着背景放大缩小或移动; 具体的需求就是这些,有些...
  • qq_31239365
  • qq_31239365
  • 2016年04月09日 08:43
  • 1300

Python-Jenkins API使用 —— 在后端代码中操控Jenkins

最近在工作中需要用到在后台代码中触发Jenkins任务的构建,于是想到Jenkins是否有一些已经封装好的API类库提供,用于处理跟Jenkins相关的操作。下面就简单介绍下我的发现。http://w...
  • u010781856
  • u010781856
  • 2016年09月25日 00:49
  • 951

计算机体系结构原理——数据操控(CPU工作原理)

CPU:计算机中控制数据操控的电路,称为CPU。Central Processing Unit。中央处理器,简称为处理器。电子电路元器件方面的硬件这里就不多谈了。主要说说内部构造,软件层面上的东西。C...
  • TCJGGSDDU
  • TCJGGSDDU
  • 2016年12月25日 00:37
  • 302

(2)PX4开发指南——飞行模式/操控

飞行模式定义了系统在任意时间的状态。用户可以通过遥控器的开关或者地面控制站切换飞行模式...
  • libing403
  • libing403
  • 2016年05月10日 00:03
  • 3924

字符设备驱动基础篇5——驱动如何操控硬件(动静态映射操作LED)

以下内容源于朱有鹏嵌入式课程的学习,,如有侵权,请告知删除。 参考资料:http://www.cnblogs.com/biaohc/p/6575074.html 这里的映射,是指物理地...
  • oqqHuTu12345678
  • oqqHuTu12345678
  • 2017年07月16日 16:55
  • 112

使用HTML5 canvas做地图(3)图片加载平移放大缩小

终于开始可以写代码了,手都开始痒了。这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作...
  • u013052982
  • u013052982
  • 2013年12月06日 14:29
  • 618

HTML5:使用Canvas和Input range控件放大缩小图片

使用了HTML5的两个新标签canvas和input range。 效果图如下,拉动控制杆可以放大缩小图片: 代码: 图片缩放 你的浏览器不支持...
  • ClementAD
  • ClementAD
  • 2015年10月06日 23:12
  • 4793

使用HTML5 canvas做地图(3)图片加载平移放大缩小

使用HTML5 canvas做地图(3)图片加载平移放大缩小 http://www.cnblogs.com/HPhone/     终于开始可以写代码了,手都开始痒...
  • u012006632
  • u012006632
  • 2016年01月30日 16:09
  • 471
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Canvas——滑杆操控图片放大缩小
举报原因:
原因补充:

(最多只允许输入30个字)