Javascript 如何沿对角线或非正方形分割画布

假设我有一块长方形的画布。我想把画布沿对角线分开，然后能够操纵这些部分来做任何我想做的事情

我的最终目标是让一个矩形沿对角线分割，两个片段在屏幕外以相反的方向进行动画制作。我想在动画循环中完全在画布内完成这项工作，或者将每个片段转换为图像元素，并使用CSS3动画移动这些片段。我只是想找出最好的方法

下面的代码、代码笔链接和图片只是为了说明我希望画布拆分的位置。你会发现这不是一个等边的完全分裂

var container=document.getElementById（'container'）；
var dogImg=document.getElementById（'dog'）；
功能转换器ImageToCanvas（图像）{
var canvas=document.createElement（“canvas”）；
canvas.width=image.width；
canvas.height=image.height；
canvas.getContext（“2d”）.drawImage（图像，0,0）；
返回画布；
}
功能抽绳（帆布）{
var context=canvas.getContext（'2d'）；
context.beginPath（）；
context.moveTo（0,0）；
lineTo（345,0）；
lineTo（0567）；
lineTo（0,0）；
stroke（）；
closePath（）；
返回画布；
};
var newDog=将图像转换为canvas（dogImg）；
var除以=抽绳（新狗）；
container.innerHTML=“”；
container.appendChild（分割）

---

您可以使用

context.clip

实现图像分割效果

context.clip

限制使用指定路径绘制图像

您可以定义其中几个剪辑区域，以将图像分割为多个片段（路径）

然后，在动画循环中，可以清除画布并使用更改的偏移重新绘制每个剪辑区域。左剪裁区域将在每个循环中向左移动（偏移）。右剪裁区域将在每个循环中向右移动（偏移）

下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var-nextTime=0；
var持续时间=1000/60*3；
var偏移=0；
var路径=[]；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/Dog-With-Cute-Cat.jpg";
函数start（）{
cw=画布宽度=图像宽度；
ch=画布高度=图像高度；
push（{path:[{x:0，y:0}，{x:150，y:0}，{x:0，y:ch}]，方向：-1}）；
push（{path:[{x:150，y:0}，{x:0，y:ch}，{x:cw，y:ch}，{x:cw，y:0}]，方向：1}）；
请求动画帧（动画）；
}
函数绘图（）{
ctx.clearRect（0,0，cw，ch）；
对于（var i=0；i您可以使用
context.clip
来实现图像分割效果

context.clip
限制使用指定路径绘制图像

您可以定义其中几个剪辑区域，以将图像分割为多个片段（路径）

然后，在动画循环中，可以清除画布并使用更改的偏移重新绘制每个剪辑区域。左剪辑区域将在每个循环中向左移动（偏移）。右剪辑区域将在每个循环中向右移动（偏移）

下面是示例代码和演示：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var-nextTime=0；
var持续时间=1000/60*3；
var偏移=0；
var路径=[]；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/Dog-With-Cute-Cat.jpg";
函数start（）{
cw=画布宽度=图像宽度；
ch=画布高度=图像高度；
push（{path:[{x:0，y:0}，{x:150，y:0}，{x:0，y:ch}]，方向：-1}）；
push（{path:[{x:150，y:0}，{x:0，y:ch}，{x:cw，y:ch}，{x:cw，y:0}]，方向：1}）；
请求动画帧（动画）；
}
函数绘图（）{
ctx.clearRect（0,0，cw，ch）；
对于（var i=0；i您始终可以使用剪辑，但请注意，这涉及到保存/还原调用，这是一项相对缓慢的工作。有人建议将resetClip（）包含在规范中，但似乎很难让团队了解为什么需要它

无论如何，我建议采取以下方法：


创建一个对象或函数，该对象或函数可以复制图像的一半之一的单个遮罩（路径）（即包含框的对角线）
对于左半部分：绘制图像，在
中将合成模式设置为目标，绘制遮罩，将画布提取为图像
对于右半部分：绘制图像，将合成模式设置为目标输出，绘制遮罩，将画布提取为图像

现在将to图像（直接使用画布元素）放在一个容器中，以便它们彼此堆叠在一起

使用过渡或动画类设置动画


var img=新图像（375667）；
img.onload=设置；
img.src=”http://i.imgur.com/1GUzYh9.jpg";
函数设置（）{
var path=[0,0345,0,0567]；//不需要最后一点。。
var left=createCanvas（此路径为“目标位置”）；
var right=createCanvas（此路径为“目标输出”）；
var cont=document.getElementById（“cont”）；
续：儿童（左）；
续：儿童（右）；
//通过设置动画/过渡类或使用JS在此处设置动画：
var x=0；
（函数循环（）{
left.style.left=x+“px”//翻译更平滑，但需要
right.style.left=-x+“px”//某些浏览器中的前缀。根据需要进行更新。。
x-=5；如果（x<-400）x=0；
请求动画帧（循环）；
})();
函数createCanvas（img、路径、模式）{
var canvas=document.createElement（“画布”），
ctx=canvas.getContext（“2d”）；
canvas.width=img.width；
canvas.height=img.height；
//画图
ctx.drawImage（img，0,0）；
//创建遮罩
ctx.moveTo（路径[0]，路径[1]）；
对于（变量i=2；i<div id="container">
  <img id="dog" src="http://i.imgur.com/1GUzYh9.jpg" width="375"
  height="667">
</div>

<script>
var container = document.getElementById('container');
var dogImg = document.getElementById('dog');

function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;
}

function drawLine(canvas) {
  var context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(0,0);
  context.lineTo(345, 0);
  context.lineTo(0, 567);
  context.lineTo(0,0);
  context.stroke();
  context.closePath();
  return canvas;
};

var newDog = convertImageToCanvas(dogImg);
var divided = drawLine(newDog);
container.innerHTML = "";
container.appendChild(divided)
</script>