如何使用可变参数旋转图片

Question

我的方法有什么问题?

我想允许用户输入一个0到180度的值，以这个值旋转图片。

如果我使用下面的代码，它可以完美地工作。

document.getElementById('myCanvas').setAttribute("style", "position:relative;height:1024px;width:100%; transform: rotate(45deg)" );

但是，如果我使用如下代码中的变量，则不执行旋转。

var deg = 45;
var rotation = "transform: rotate(" + deg + "deg)";
document.getElementById('myCanvas').setAttribute("style", "position:relative;height:1024px;width:100%; rotation" );

我如何管理我的需求?

提前感谢。

Answer 1

看看你的代码，我认为你的问题是因为你错过了一些连接。试试这个:

var deg = 45;
var rotation = "transform: rotate(" + deg + "deg);"; // Note: Extra semicolon in string
var element = document.getElementById('myCanvas')
element.setAttribute("style", "position:relative;height:1024px;width:100%;" + rotation);

更进一步

如果您希望degree根据用户输入进行更改，那么我建议在页面中添加输入元素，等待单击(或更改)事件，然后更新您的图片样式:

var number_input = document.querySelector("input[type=number]#rotation");    
var element // = ...
var myExtraStyles // = ... 
// Pass in extra styles, like you width and such as above.
function rotateElement(degrees, extraStyles) {
    var rotation = "transform: rotate(" + deg + "deg);";
    element.setAttribute("style", extraStyles + rotation);
}
number_input.addEventListener("click", function(){
    rotateElement(element.value, myExtraStyles);
})