Javascript 正在尝试实现工作画布旋转
我们这里有一个画布旋转工作完美: 这里是我自己领域的一个例子,仍然运行良好:。来源: 我试图在这个非常简单的绘图“应用程序”上实现旋转功能:。来源:。这是我一直未能做到的 我读过关于画临时画布的书。有道理。但到目前为止我还没有任何运气 我非常欢迎你的建议Javascript 正在尝试实现工作画布旋转,javascript,canvas,rotation,Javascript,Canvas,Rotation,我们这里有一个画布旋转工作完美: 这里是我自己领域的一个例子,仍然运行良好:。来源: 我试图在这个非常简单的绘图“应用程序”上实现旋转功能:。来源:。这是我一直未能做到的 我读过关于画临时画布的书。有道理。但到目前为止我还没有任何运气 我非常欢迎你的建议 编辑:已完成旋转、翻转等操作。问题已解决。draw3.txt给出了404。另外,绘图应用程序上的按钮在哪里?很抱歉404。固定的draw.php中没有实验按钮或任何东西。这是网站上正在使用的页面。 var canvas=document.get
编辑:已完成旋转、翻转等操作。问题已解决。
draw3.txt
给出了404。另外,绘图应用程序上的按钮在哪里?很抱歉404。固定的draw.php中没有实验按钮或任何东西。这是网站上正在使用的页面。
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var angleInDegrees=0;
var image=document.createElement("img");
image.onload=function(){
ctx.drawImage(image,canvas.width/2-image.width/2,canvas.height/2-image.width/2);
}
image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
$("#clockwise").click(function(){
angleInDegrees+=90;
drawRotated(angleInDegrees);
});
$("#counterclockwise").click(function(){
angleInDegrees-=90;
drawRotated(angleInDegrees);
});
function drawRotated(degrees){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.translate(canvas.width/2,canvas.height/2);
ctx.rotate(degrees*Math.PI/180);
ctx.drawImage(image,-image.width/2,-image.width/2);
ctx.restore();
}