Java贪吃蛇360旋转_html5 图片360旋转 Web程序 - 贪吃蛇学院-专业IT技术平台

本文介绍了一种使用HTML和JavaScript实现图片360度旋转的方法。通过创建canvas元素并利用rotate方法,可以实现对图片的多角度展示。用户可以通过按钮控制图片旋转的角度,包括0度、90度、180度、270度和360度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

test.html

图片360度旋转

input {

font-size:18px;

padding:5px 20px 5px 20px;

font-weight:bold;

color:white;

background-color:#c5464a;

cursor:pointer;

border:none;

outline:none;

border-radius:7px 7px 7px 7px;

}

img3.jpg

test.js

window.onload = function() {

var inputval = document.getElementsByTagName(‘input‘);

var imgval = document.getElementById(‘img‘);

var yimg = new Image();

var iNow = 0;

yimg.onload = function() {

draw(imgval);

}

yimg.src = imgval.src;

function draw(obj) {

var c = document.createElement(‘canvas‘);

var cxt = c.getContext(‘2d‘);

c.width = obj.width;

c.height = obj.height;

obj.parentNode.replaceChild(c, obj);

cxt.drawImage(obj, 0, 0);

inputval[1].onclick = function() {

if (iNow == 3) {

iNow = 0;

} else {

iNow++;

}

toChange();

};

inputval[0].onclick = function() {

if (iNow == 0) {

iNow = 3;

} else {

iNow--;

}

toChange();

};

function toChange() {

switch (iNow) {

case 0:

c.width = obj.width;

c.height = obj.height;

cxt.rotate(0 * Math.PI / 180);

cxt.drawImage(obj, 0, 0);

break;

case 1:

c.width = obj.height;

c.height = obj.width;

cxt.rotate(90 * Math.PI / 180);

cxt.drawImage(obj, 0, -obj.height);

break;

case 2:

c.width = obj.width;

c.height = obj.height;

cxt.rotate(180 * Math.PI / 180);

cxt.drawImage(obj, -obj.width, -obj.height);

break;

case 3:

c.width = obj.height;

c.height = obj.width;

cxt.rotate(270 * Math.PI / 180);

cxt.drawImage(obj, -obj.width, 0);

break;

case 4:

c.width = obj.width;

c.height = obj.height;

cxt.rotate(360 * Math.PI / 180);

cxt.drawImage(obj, obj.width, obj.height);

break;

}

}

}

}

图片:

20180111003411583984.png

效果:

20180111003411598633.gif

2017-09-08 23:03:47

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值