鼠标   1.操作canvas 中的 img。 右键放大缩小，左键移动img。

　　　2.拖动input type= range  改变图片的透明度

html 代码

<!DOCTYPE html>

<html lang="en" oncontextmenu="doNothing()">

<head>

    <meta charset="UTF-8">

    <title>图片已中心店的坐标缩放</title>

    <style>

        #box1 {

            width: 500px;

            height: 300px;

            border: 1px solid black;

            overflow: hidden;

            float: left;

        }

        #box2 {

            width: 500px;

            height: 300px;

            border: 1px solid black;

            overflow: hidden;

            float: left;

            margin-left: 50px;

            box-sizing: border-box;

        }

    </style>

    <script type="text/javascript">function ss() {

        if (event.button == ) {

            alert("aaaa");

        }

        document.onmousedown = ss;

    }</script>

</head>

<body>

<div>

    <div id="box1">

        <canvas id="cas1" width="" height=""></canvas>

    </div>

    <div id='box2'>

        <canvas id="cas2" width="" height=""></canvas>

    </div>

    <div style="clear: both"></div>

</div>

<input type="range" id="inp_d" value="">

</body>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="./index.js"></script>

</html>

js 代码

/**

 * Created by Administrator on 2018/7/6.

 */

function doNothing() {

    window.event.returnValue = false;

    return false;

}

var imgX = 0;

var imgY = 0;

var imgScale = 1;

var val = 0;

window.onload = function (event) {

    var count = [

        {cas2: 'cas1', box2: '#box1,#box2', path: './2.jpg', callback: imgOnload_callbak, scale: methods,icon_img:'./4.jpg,./5.jpg',inp_id:'#inp_d,#inp_d'},

        {cas2: 'cas2', box2: '#box1,#box2,',path: './3.jpg', callback: imgOnload_callbak, scale: methods,icon_img:'./5.jpg,./4.jpg',inp_id:'#inp_d,#inp_d'}

    ];

    for (var i = 0; i < count.length; i++) {

        getElement(count[i].cas2, count[i].box2, count[i].path, count[i].callback, count[i].scale,count[i].icon_img,count[i].inp_id)

    }

};

function getElement(cas_id, box_id, img_src, imgOnload_call, methods,icon_img,inp_id) {

    var canvas = document.getElementById(cas_id);

    var box = document.getElementById(box_id);

    var arr = box_id.split(',');

    var context = canvas.getContext('2d');

    var img = new Image();

    var img1 = new Image();

    var img1_arr = icon_img.split(',');

    img.src = img_src;

    for(var i = 0; i < img1_arr.length;i++){

        img1.src = img1_arr[i];

    }

    imgOnload_call(img, context, canvas, img1);

    methods(arr, canvas, context, img,img1);

    inp_methods(inp_id,context,canvas,img,img1)

}

function imgOnload_callbak(img,context,canvas,img1) {

    img.onload = function () {

        context.globalAlpha = 1.0;

        context.drawImage(img, 0, 0);

    };

    img1.onload = function (){

        setTimeout(function(){

            context.globalAlpha = 0;

            context.drawImage(img1,0,0,img1.width,img1.height,0,0,img1.width,img1.height);

        },50);

    }

}

function methods(elements, canvas, context, img,img1) {

    var img_y = 1;

    elements.forEach(function (item, i) {

        $(item).mousedown(function (event) {

            console.log(val);

            var e_btn = event.button;

            if (e_btn == 2) {

                var e_down_y = event.clientY;

                $(item).mousemove(function (event) {

                    var e_move_y = event.clientY;

                    if (e_move_y < e_down_y) {

                        img_y *= 1.01;

                    } else {

                        img_y /= 1.01;

                    }

                    e_down_y = e_move_y;

                    img_y = (img_y > 1) ? img_y : 1;

                    canvas.style.transform = "scale(" + img_y + "," + img_y + ")"

                });

                $(item).mouseup(function () {

                    $(item).unbind('mousemove');

                    $(item).unbind('mouseup');

                })

            }

            else if (e_btn == 0) {

                var e_drag_down = {

                    x: event.clientX,

                    y: event.clientY

                };

                $(item).mousemove(function (event) {

                    var e_drag_move = {

                        x: event.clientX,

                        y: event.clientY

                    };

                    var e_drag_distance = {

                        x: e_drag_move.x - e_drag_down.x,

                        y: e_drag_move.y - e_drag_down.y

                    };

                    e_drag_down = e_drag_move;

                    imgX += e_drag_distance.x;

                    imgY += e_drag_distance.y;

                    context.clearRect(0, 0, canvas.width, canvas.height);

                    context.globalAlpha = 1.0;

                    context.drawImage(img, 0, 0, img.width, img.height, (imgX / 5), (imgY / 5), img.width * imgScale, img.height * imgScale);

                    context.globalAlpha = val;

                    context.drawImage(img1, 0, 0, img1.width, img1.height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale);

                });

                $(item).mouseup(function () {

                    $(item).unbind("mousemove");

                    $(item).unbind('mouseup');

                })

            }

        })

    })

}

function inp_methods(inp_id,context,canvas,img,img1){

    var inp_id_arr = inp_id.split(',');

    inp_id_arr.forEach(function(item,i){

        $(item).on('input propertychange',function(){

            val = $(item).val();

            val = ( val < 0.1)? 0.1 : val/100;

            context.clearRect(0,0,canvas.width,canvas.height);

            context.globalAlpha = 1.0;

            context.drawImage(img,0,0,img.width, img.height, (imgX / 5), (imgY / 5), img.width * imgScale, img.height * imgScale);

            context.globalAlpha = val;

            context.drawImage(img1,0,0,img1.width, img1.height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale);

        })

    });

}

有错误的地方，请大家帮忙 指正一下。谢谢！

js -- canvas img 封装的更多相关文章

  1. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  2. Atitit js canvas的图像处理类库attilax总结与事业

    Atitit js canvas的图像处理类库attilax总结与事业 1.1. 脸部识别JavaScript类库Tracking.js1 1.2. AlloyImage特性1 1.3. CamanJ ...

  3. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  4. JS类的封装及实现代码

    js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...

  5. 【转】第7篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：全自动注册与反射方法分析

    作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  6. 【转】第6篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+自动反射方法分析

    作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  7. 【转】第5篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  8. 【转】第4篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-18 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第4篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  9. 【转】3篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：官方原生方法分析

    作者: 牛A与牛C之间 时间: 2013-11-17 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第3篇:Xilium CefGlue 关于 CLR Object 与 JS ...

随机推荐

  1. jquery实现上下浮动

    jquery实现上下浮动: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. SQL SERVER中求上月、本月和下月的第一天和最后一天

    1.上月的第一天 SELECT CONVERT(CHAR(10),DATEADD(month,-1,DATEADD(dd,-DAY(GETDATE())+1,GETDATE())),111) 2.上月 ...

  3. 三分钟明白 Activiti工作流 -- java运用_转载

    一. 什么是工作流 以请假为例,现在大多数公司的请假流程是这样的 员工打电话(或网聊)向上级提出请假申请——上级口头同意——上级将请假记录下来——月底将请假记录上交公司——公司将请假录入电脑 采用工作 ...

  4. ACM训练联盟周赛(第三场）

    A.Teemo's bad day Today is a bad day. Teemo is scolded badly by his teacher because he didn't do his ...

  5. monitoring_db

    #!/bin/bash# Program: # Automatic inspection operation system and oracle database.# History:# 2016/0 ...

  6. jQuery的一些选择器

    一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { ...

  7. [APIO2014]回文串 后缀自动机_Manancher_倍增

    Code: // luogu-judger-enable-o2 #include <cstdio> #include <algorithm> #include <cstr ...

  8. 转载-- Qt Creator编译时make： arm-linux-g++: command not found 错误！

    前提是已经配置好交叉编译器,但是qt creator找不到. 解决方法: 修改 /usr/local/Trolltech/QtEmbedded-4.7.0-arm/mkspecs/qws/linux- ...

  9. 用C3P0建立server与数据库的连接

    1:在MyEclipse建立 Web Service Project 2:在project中建立servlets包 3:在包中新建Servlet文件(採用new Servlet方法可省去配置web.x ...

  10. SDSoC使用体验

    本文作者:卜居 转载请保留作者信息.原文网址(http://blog.csdn.net/kkk584520/article/details/47220575). 本文project可到我的资源下载(h ...