Javascript 如何使用画布单独操纵图像的切片？

我不熟悉HTML中的“画布”术语。我把一幅画切成两半，在两半之间留了一个小间隙。我想分别旋转每一半以创建半折叠效果

window.onload=函数（）{
var myCanv=document.getElementById（“myCanvas”）；
var context=myCanv.getContext（'2d'）；
var myImage=document.getElementById（“myImage”）；
drawImage（myImage，0,0，myImage.width/2，myImage.height，0,0，myCanv.width/2，myCanv.height）；
context.drawImage（myImage，（myImage.width/2）+1,0，myImage.width/2，myImage.height，（myCanv.width/2）+0.5,0，myCanv.width/2，myCanv.height）；
};您可能希望倾斜图像的两半部分，而不是旋转它们

要倾斜，可以使用
context.transform
或
context.setTransform


示例代码和演示：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var左=0.1；
var-skewRight=-.1；
var-cx=100；
变量y=30；
var-iw，ih；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/cars.jpg";
函数start（）{
iw=img.宽度；
ih=img.高度；
draw（）；
}
函数绘图（）{
//用灰色填充画布背景
ctx.fillStyle='gray'；
ctx.fillRect（0,0，cw，ch）；
ctx.fillStyle='black'
//绘制带有笔划边框的左倾斜页面
setTransform（1，左偏，0,1，cx，0）；
ctx.drawImage（img，0,0，iw/2，ih，-iw/2，y，iw/2，ih）；
ctx.strokeRect（-iw/2，y，iw/2，ih）；
setTransform（1,0,0,1,0,0）；
//绘制带有笔划边框的右倾斜页面
setTransform（1，skewRight，0,1，cx，0）；
ctx.drawImage（img，iw/2,0，iw/2，ih，0，y，iw/2，ih）；
ctx.冲程（0，y，iw/2，ih）；
setTransform（1,0,0,1,0,0）；
}
body{背景色：白色；}
img，#canvas{边框：1px纯红；}
原始图像（左）和
图像对半、倾斜并加上边框，看起来像一个褶皱
将图像的一半发送到另一个不可见的画布，将另一半发送到另一个不可见的画布，使用“context.rotate（）”旋转每个画布，然后使用context.drawImage（InvisibleCanvas1，x，y）和context.drawImage（InvisibleCanvas2，x，y）旋转到可见画布。