javascript - 在 Javascript 中以特定方式镜像复制的画布

Question

有一个正方形的画布，内容由Javascript动态绘制（不是外部图像文件！）有四个角，即a（左上）、b（右上）、c（左下）和d（右下）。我想要一个脚本来创建一个由第一个画布的四个重复实例组成的新画布：

ab
cd

以特定方式镜像（蝴蝶）：

dccd
baab
baab
dccd

并以旋转方式（风车）：

dcbd
baac
caab
dbcd

先感谢您！

标签： javascriptcanvasrotationtransformmirror

Answer 1

我解决了关于蝴蝶方式的第一个问题：

var sid=$("source").toDataURL("image/png"),dcc=$("destination").getContext('2d'),di=new Image,dim=$("source").offsetWidth;
$("destination").width=(dim*2);$("destination").height=(dim*2);di.onload=function(){
dcc.drawImage(di,dim,dim,dim,dim);
dcc.scale(-1,-1);dcc.drawImage(di,0,0,dim*-1,dim*-1);
dcc.scale(-1,1);dcc.drawImage(di,dim,0,dim*1,dim*-1);
dcc.scale(-1,-1);dcc.drawImage(di,0,dim,dim*-1,dim*1);
};di.src=sid;

但是，风车方式还没有解决......这里非常感谢建议！