[英]rotate image by its own center in canvas
我有一个奇怪的问题,当我进行旋转以传递文字角度值(我得到控制台打印的前一个角度并放置变量)时,它可以正常工作,但是如果我运行传递以下变量的代码(如下面的代码),则图像被绘制为“顶部更多,左侧更多”(对不起,我的英语不好)
function setImg(src,x,y,angle)
{
var TO_RADIANS = Math.PI/180;
var base_image = new Image();
base_image.src = src
base_image.onload = function () {
console.log("-->->"+parseFloat(angle))
ctx.save(); //saves the state of canvas
ctx.translate(x+(base_image.width/2), y+(base_image.height/2)); //let's translate
ctx.rotate(angle*TO_RADIANS); //increment the angle and rotate the image
ctx.drawImage(base_image, -(base_image.width/2),-(base_image.height/2)); //draw the image ;)
ctx.restore(); //restore the state of canvas
};
}
谢谢!
ctx.transform
, ctx.rotate
, ctx.scale
和ctx.translate
通过创建新矩阵,然后将现有转换与该新矩阵相乘来工作。
这意味着使用这些功能的结果将根据转换的当前状态而变化。
为确保将转换应用于默认(恒等)矩阵,请使用函数ctx.setTransform(1, 0, 0, 1, 0, 0)
)重置转换矩阵,该函数将现有矩阵替换为新的默认矩阵。
如果在每组转换之前执行此操作,则无需使用保存和还原来保持当前转换状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.