您的位置：首页 > 其它

canvas实现图片围绕左上角一点进行旋转

2017-07-04 10:40 441 查看

canvas插入图片，需要先在onload事件中预加载图片，然后在用drawImage（）方法插入图片。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="逆时针" />
<input type="button" value="顺时针" />
<div id="">
<img src="img/code.jpg" id="myimg"/>
</div>
</body>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oImg = document.getElementById('myimg');

var yImg = new Image();
var isNow = 0;

yImg.onload = function(){
draw(oImg);
}

yImg.src = oImg.src;

function draw(obj){
var oC = document.createElement('canvas');//创建canvas节点用来替换img节点
var oGc = oC.getContext('2d');
//将canvas的宽高和图片宽高设置成一样的
oC.width = obj.width;
oC.height = obj.height;

obj.parentNode.replaceChild(oC,obj);
oGc.drawImage(obj,0,0);

aInput[0].onclick = function(){
if (isNow == 0) {
isNow = 3;
} else{
isNow--;
}
tochange();
}
aInput[1].onclick = function(){
if (isNow ==3) {
isNow = 0;
} else{
isNow++;
}
tochange();
}

function tochange(){
switch (isNow){
case 0:
oC.width = obj.width;
oC.height = obj.height;
oGc.rotate(0);
oGc.drawImage(obj,0,0);
break;
case 1:
oC.width = obj.height;
oC.height = obj.width;
oGc.rotate(90*Math.PI/180);
oGc.drawImage(obj,0,-obj.height);
break;
case 2:
oC.width = obj.width;
oC.height = obj.height;
oGc.rotate(180*Math.PI/180);
oGc.drawImage(obj,-obj.width,-obj.height);
break;
case 3:
oC.width = obj.height;
oC.height = obj.width;
oGc.rotate(270*Math.PI/180);
oGc.drawImage(obj,-obj.width,0);
break;
default:
break;
}
}
}
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航