HTML5旋转图片
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"><script src="CanvasModule.js" type="text/javascript" charset="utf-8"></script><title>旋轉(zhuǎn)跳躍</title>
</head><script type="text/javascript" >
if (document.all) {
window.attachEvent('onload', load);
}
else
{
window.addEventListener('load', load, false);
}//globle
var CanvasImageItems=new Array();
var BackgroundDraw;
var TargetCanvas;
var startMx=0;
var startMy=0;
var startDrgx;
var startDrgy;
var selectTmp=new Array();function load(){
//添加鍵盤處理事件
window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);TargetCanvas=document.getElementById("MyCanvas");
TopCanvas=document.getElementById("topCanvas");var imgs=document.getElementsByTagName("img");BackgroundDraw =TargetCanvas.getContext("2d");
TopDraw=TopCanvas.getContext("2d");for(i=0;i<imgs.length;i++){
var item=new CanvasImage();
item._oElement=imgs[i];
item.left=i*123;
item.top=0;
item.tmpleft=i*123;
item.tmptop=0;
item.width=imgs[i].width;
item.height=imgs[i].height;
CanvasImageItems[i]=item;
drawBackgrdCanvasImg(CanvasImageItems[i]);
}TargetCanvas.onmousedown=mouseDownHandler;
TargetCanvas.onmouseup=mouseUpHandler;
TargetCanvas.onmousemove=mouseMoveHandler;TopCanvas.onmousedown=TopmouseMoveHandler;
TopCanvas.onmouseup=TopmouseUpHandler;
TopCanvas.onmousemove=TopmouseMoveHandler;}var MousePositon=function(){
var objTop = getOffsetTop(document.getElementById("MyCanvas"));//對象x位置
var objLeft = getOffsetLeft(document.getElementById("MyCanvas"));//對象y位置return {
mouseX:event.clientX+document.body.scrollLeft-objLeft,//鼠標x位置
mouseY:event.clientY+document.body.scrollTop-objTop//鼠標y位置
}
}function getOffsetTop(obj){
var tmp = obj.offsetTop;
var val = obj.offsetParent;
while(val != null){
tmp += val.offsetTop;
val = val.offsetParent;
}
return tmp;
}function getOffsetLeft(obj){
var tmp = obj.offsetLeft;
var val = obj.offsetParent;
while(val != null){
tmp += val.offsetLeft;
val = val.offsetParent;
}
return tmp;
}function isChoosed(){
var re=-1;
for(i=0;i<CanvasImageItems.length;i++)
{
cimg=CanvasImageItems[i];
TopDraw.translate(cimg.left+cimg.width/2,cimg.top+cimg.height/2);
TopDraw.rotate(cimg.angle * Math.PI / 180);
TopDraw.beginPath();
TopDraw.rect(-cimg.width/2,-cimg.height/2,cimg.width,cimg.height);var mp=MousePositon();
if(TopDraw.isPointInPath(mp.mouseX,mp.mouseY))
{
TopDraw.stroke();
re=i;
document.getElementById("selectedone").innerHTML =re;
TopDraw.rotate(-cimg.angle * Math.PI / 180);
TopDraw.translate(-cimg.left-cimg.width/2,-cimg.top-cimg.height/2);
break;
}TopDraw.rotate(-cimg.angle * Math.PI / 180);
TopDraw.translate(-cimg.left-cimg.width/2,-cimg.top-cimg.height/2);
}
TopDraw.closePath();
TopDraw.clearRect(0,0,1000,600);
TopDraw.restore();
return re;
}function mouseMoveHandler(){
var mp=MousePositon();
document.getElementById("mousePosition").innerHTML =mp.mouseX+","+mp.mouseY;
}function mouseDownHandler(){TopDraw.clearRect(0,0,1000,600);
var mp=MousePositon();
startMx=mp.mouseX;
startMy=mp.mouseY;var selected= isChoosed();if(selected>-1)
{
document.getElementById("topCanvas").style.zIndex=2;
CanvasImageItems[selected].selected=true;//=CanvasImageItems[selected].selected==true?false:true;
}
else
{
for(i in CanvasImageItems ){
if(CanvasImageItems[i].selected==true)
{
CanvasImageItems[i].selected=false;
}
}
redrawAllBt();
return ;
}
refreshBackground();
for(i=0;i<CanvasImageItems.length;i++){
CanvasImageItems[i].tmpleft=CanvasImageItems[i].left;
CanvasImageItems[i].tmptop=CanvasImageItems[i].top;
}TopmouseMoveHandler();
console.log("bt down mouse");
}function mouseUpHandler(){
console.log("bt up mouse");
}function TopmouseMoveHandler(){
if(selectTmp==null)
return ;
TopDraw.clearRect(0,0,1000,600);
var mp=MousePositon();
document.getElementById("mousePosition").innerHTML =mp.mouseX+","+mp.mouseY;
redrawTopRect(1000,600);
//console.log("top mouse move");
}function TopmouseUpHandler(){
document.getElementById("topCanvas").style.zIndex=0;
TopDraw.clearRect(0,0,1000,600);
redrawAllBt();
console.log("top up mouse");
}function redrawTopRect(RECT_WIDTH,RECT_HEIGHT){
TopDraw.clearRect(0,0,1000,600);
var mp=MousePositon();
for(i in CanvasImageItems ){
if(CanvasImageItems[i].selected==true)
{
drawTopCanvasImg(CanvasImageItems[i]);
CanvasImageItems[i].tmpleft=CanvasImageItems[i].left+mp.mouseX-startMx;
CanvasImageItems[i].tmptop=CanvasImageItems[i].top+mp.mouseY-startMy;
}
}
}function redrawAllBt(){
BackgroundDraw.clearRect(0,0,1000,600);
var imgs=document.getElementsByTagName("img");for(i=0;i<CanvasImageItems.length;i++){
CanvasImageItems[i].left=CanvasImageItems[i].tmpleft;
CanvasImageItems[i].top=CanvasImageItems[i].tmptop;
drawBackgrdCanvasImg(CanvasImageItems[i]);
}}function drawTopCanvasImg(cimg){TopDraw.translate(cimg.tmpleft+cimg.width/2,cimg.tmptop+cimg.height/2);
TopDraw.rotate(cimg.angle * Math.PI / 180);TopDraw.drawImage(cimg._oElement,-cimg.width/2,-cimg.height/2,cimg.width,cimg.height);
if(cimg.selected==true){
TopDraw.beginPath();
TopDraw.rect(-cimg.width/2-1,-cimg.height/2-1,cimg.width+2,cimg.height+2);
TopDraw.stroke();
TopDraw.closePath();
}
TopDraw.rotate(-cimg.angle * Math.PI / 180);
TopDraw.translate(-cimg.tmpleft-cimg.width/2,-cimg.tmptop-cimg.height/2);
TopDraw.restore();
}function drawBackgrdCanvasImg(cimg){BackgroundDraw.translate(cimg.left+cimg.width/2,cimg.top+cimg.height/2);
BackgroundDraw.rotate(cimg.angle * Math.PI / 180); BackgroundDraw.drawImage(cimg._oElement,-cimg.width/2,-cimg.height/2,cimg.width,cimg.height);
if(cimg.selected==true){
BackgroundDraw.beginPath();
BackgroundDraw.rect(-cimg.width/2-1,-cimg.height/2-1,cimg.width+2,cimg.height+2);
BackgroundDraw.stroke();
BackgroundDraw.closePath();
}BackgroundDraw.rotate(-cimg.angle * Math.PI / 180);
BackgroundDraw.translate(-cimg.left-cimg.width/2,-cimg.top-cimg.height/2);
BackgroundDraw.restore();}function refreshBackground(){
BackgroundDraw.clearRect(0,0,1000,600);
for(i=0;i<CanvasImageItems.length;i++)
{
if(CanvasImageItems[i].selected==false)
drawBackgrdCanvasImg(CanvasImageItems[i]);
}
}function onKeyDown(evt)
{
refreshBackground();
TopDraw.clearRect(0,0,1000,600);
if(evt.keyCode=="39")
{
document.getElementById("topCanvas").style.zIndex=2;
for(i in CanvasImageItems ) {
if(CanvasImageItems[i].selected==true){
CanvasImageItems[i].angle+=10;
if( CanvasImageItems[i].angle>360)
CanvasImageItems[i].angle=0;
drawTopCanvasImg(CanvasImageItems[i]);
}
}
}
else if(evt.keyCode=='37')
{
document.getElementById("topCanvas").style.zIndex=2;
for(i in CanvasImageItems ) {
if(CanvasImageItems[i].selected==true){
CanvasImageItems[i].angle-=10;
if( CanvasImageItems[i].angle<-360)
CanvasImageItems[i].angle=0;
drawTopCanvasImg(CanvasImageItems[i]);}
}
}} function onKeyUp(evt){
document.getElementById("topCanvas").style.zIndex=0;
redrawAllBt();
}
</script>
<body>
<canvas id="MyCanvas" class="main" width="1000" height="600" style="background:grey;position:absolute;left:200px;top:0px;z-index:1;"></canvas><canvas id="topCanvas" class="main" width="1000" height="600" style="background:transparent;position:absolute;left:200px;top:0px;z-index:0;"></canvas><div style="margin:600px">鼠標位置
<span id="mousePosition"></span>選中<span id="selectedone"></span>
<img src="img1.jpg" width="103px" height="163px" border="0" alt="">
<img src="img2.jpg" width="103px" height="163px" border="0" alt="">
<img src="img3.jpg" width="103px" height="163px" border="0" alt="">
<img src="img4.jpg" width="103px" height="163px" border="0" alt=""></div></body></html>function CanvasImage()
{
CanvasImage.prototype._oElement = null;
CanvasImage.prototype.top = 0;
CanvasImage.prototype.left = 0;CanvasImage.prototype.tmptop =0;
CanvasImage.prototype.tmpleft =0;CanvasImage.prototype.width = 0;
CanvasImage.prototype.height = 0;
CanvasImage.prototype.oCoords = null;
CanvasImage.prototype.angle =-10;
CanvasImage.prototype.theta = 0;
CanvasImage.prototype.scalex = 1;
CanvasImage.prototype.scaley = 1;
CanvasImage.prototype.cornersize = null;
CanvasImage.prototype.polaroidheight = null;
CanvasImage.prototype.randomposition = null;
CanvasImage.prototype.selected = false;
CanvasImage.prototype.bordervisibility = false;
CanvasImage.prototype.cornervisibility = false;}
}
?
轉(zhuǎn)載于:https://www.cnblogs.com/lxdonge/p/4433922.html
總結(jié)
- 上一篇： webform 简单的服务器控件。
- 下一篇： html5中在canvas上绘图