HTML5旋转图片

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

<script src="CanvasModule.js" type="text/javascript" charset="utf-8"></script>

<title>旋转跳跃</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;

}
}
时间： 2024-08-05 07:01:50

HTML5旋转图片的相关文章

13种酷炫的html5 3D图片切换代码

jQuery 3D图片叠加css3翻转图片切换特效 html5图片3d切换幻灯片轮播特效代码 jquery 3d响应式幻灯片带左右按钮的图片滑动切换效果 jquery.slicebox酷炫的html5 3d图片轮播幻灯片切换效果 html5 css3 3D动画制作手机界面3D叠加突出动画效果 html5 3D图片网格布局点击图片3D动画弹出大图文字信息 css3 transform属性制作鼠标点击3D图片叠加动画效果 modernizr html5 jquery.windy图片类似纸被风吹走3D

js旋转图片的功能

最近突然想研究一下js旋转图片的功能.对于之前的实现方式,就不先说了.现在HTML5很不错,主要了解一下HTML5中的图片旋转吧. 实例演示:  http://www.imqing.com/demo/rotateImg.html 原理:利用canvas对象来旋转. 实现方式:首先创建一个canvas元素,然后把img元素绘入canvas.但是,实际上,这是默认情况,就是图片没旋转时.如果图片要旋转90度的话,就需要先把canvas画布旋转90度后再绘图. 描述如下: (内部旋转原理是这样的,图片

10款让人惊叹的HTML5/jQuery图片动画特效

1.HTML5相册照片浏览器 可连接Flickr照片服务 以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强.不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫酷.今天分享的这款HTML5相册浏览器可以连接到Flickr获取照片,也可以连接到youtube获取视频,照片在初始化的时候有波浪般的效果. 在线演示 源码下载 2.CSS3图片模糊效果 今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用C

Camera图片特效处理综述（Bitmap的Pixels处理、Canvas/paint的drawBitmap处理、旋转图片、裁截图片、播放幻灯片浏览图片&lt;线程固定时间显示一张&gt;）

一种是直接对Bitmap的像素进行操作,如:叠加.边框.怀旧.(高斯)模糊.锐化(拉普拉斯变换). Bitmap.getPixels(srcPixels, 0, width, 0, 0, width, height); newR = (int) (pixR * alpha + layR * (1 - alpha));    newR = Math.min(255, Math.max(0, newR));    ...    srcPixels[pos] = Color.argb(newA, ne

HTML5实现图片文件异步上传

利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这边的效果预览: 1.文件未选择 2.文件已选择 HTML代码部分: 思路:下面代码中我利用css的z-index属性将input="file"标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框.下面的masklayer用于点击确认按钮后的弹出层,避免用户重复点击确认按钮. <div id

HTML5将图片转化成字符画

HTML5将图片转化成字符画 字符画大家一定非常熟悉了,那么如何把一张现有的图片转成字符画呢?HTML5让这个可能变成了现实,通过canvas,可以很轻松实现这个功能.其实原理很简单:扫描图片相应位置的像素点,再计算出其灰度值,根据灰度值的大小,分别用字符#*+“和空格来填充.下面是源码:HTML:一个canvas元素#cv,一个字符画容器#txt . 1 <canvas id="cv">fuck ie</canvas> 2 <div id="t

旋转图片

旋转图片 by 伍雪颖 - (void)startAnimation { CABasicAnimation* rotationAnimation; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ]; rotationAnimation

CSS旋转图片

1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

HTML5旋转立方体

在工作中的经常使用repo命令,但是有时会忘记一些命令和遇到的一些问题,记录下来方便已经查询. 常见问题: 问题1:找不到命令:repo 方法: 在下载android源码的时候用repo时提示找不到命令,可以用如下方法解决,在命令行中输入如下两行: echo 'export PATH=$PATH:$Home/bin' >>~/.bashrc export PATH=$PATH:$HOME/bin 问题2: /home/xxxxxx/bin/repo: line 1: 在未预料的"ne