document.body.innerHTML=`<canvas id="myCanvas" style="border:1px solid #d3d3d3;height:100px;width:100px"></canvas>
<br/>
<canvas id="myCanvas1" style="border:1px solid #d3d3d3;height:100px;width:100px;"></canvas>`;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillText("要写", 20, 20);
ctx.fillText("嘿嘿", 20, 50);
ctx.fillText("哈哈", 20, 80);
var width=100,height=100;
var data = ctx.getImageData(0, 0, width, height);
bbb=[];
for(var i=0;i<height;i++){
bbb.unshift(...Array.prototype.slice.call(data.data,i*width*4,(i+1)*width*4));
}
for(var i=0;i<bbb.length;i++){
data.data[i]=bbb[i];
}
var c1=document.getElementById("myCanvas1");
var ctx1=c1.getContext("2d");
ctx1.putImageData(data,0,0);
将像素数据一行一行重新排列