js -- canvas img 封装
鼠标 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 封装的更多相关文章
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- Atitit js canvas的图像处理类库attilax总结与事业
Atitit js canvas的图像处理类库attilax总结与事业 1.1. 脸部识别JavaScript类库Tracking.js1 1.2. AlloyImage特性1 1.3. CamanJ ...
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- JS类的封装及实现代码
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...
- 【转】第7篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：全自动注册与反射方法分析
作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第6篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+自动反射方法分析
作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第5篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+委托回调方法分析
作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第4篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：委托回调方法分析
作者: 牛A与牛C之间 时间: 2013-11-18 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第4篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】3篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：官方原生方法分析
作者: 牛A与牛C之间 时间: 2013-11-17 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第3篇:Xilium CefGlue 关于 CLR Object 与 JS ...
随机推荐
- Linux基础04
** Linux基本操作常用命令(四) ** Linux系统管理命令 1.top:查看系统资源,每隔三秒刷新一次,按q:退出浏览状态 2.free:查看内存信息,-m,以MB单位显示 3.netsta ...
- 使用python fabric搭建RHEL 7.2大数据基础环境以及部分优化
1.使用python fabric进行Linux基础配置 使用python,可以让任何事情高效起来,包括运维工作,fabric正式这样一套基于python2的类库,它执行本地或远程shell命令提供了 ...
- SSRS 报表 报表迁移
数据拷贝下来以后在新的服务器上面还是进行原来的设置 点击报表服务器的连接查看报表服务器列表 这是给每个账户增加访问权限 在主界面点击文件夹设置,给每个角色分配操作报表的权限.,上面那个权限和这个权限都 ...
- AngularJs轻松入门（七）多视图切换
在AngularJs应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图 ...
- 51Nod 1007 正整数分组（01背包）
将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的. Input 第1行:一个数N,N为正整数的数量. ...
- SSD-tensorflow-2 evaluation
测试就是用voc2007的test set来测试已经训练好的checkpoint的mAP,github上提供了三个已经训练好的model的checkpoint checkpoint 里面已有的300_ ...
- 事件代理（event的target属性）
event的target属性 一个题:请通过事件代理实现当点击每一个li标签,弹出相应li标签内的内容 Event对象提供了一个属性叫target,可以返回事件的目标节点,我们称为事件源,也就是说,t ...
- OpenJDK源码研究笔记(九)-可恨却又可亲的的异常(NullPointerException)
可恨的异常 程序开发过程中,最讨厌异常了. 异常代表着程序出了问题,一旦出现,控制台会出现一屏又一屏的堆栈错误信息. 看着就让人心烦. 对于一个新人来讲,遇到异常经常会压力大,手忙脚乱,心生畏惧. 可 ...
- 分别改动Cube每一个面的贴图UV（Unity3D开发之十八）
猴子原创.欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/46611169 ...
- 惊叹计算机运行速度的提升---以n Queens 问题为例
1 介绍 实现了书<Data Structures and Program design in C++>(Robert L. Kruse and Alexander J. Ryba, 20 ...