如何使用Javascript以45度角切割图像？

Question

基本上我需要缩小图像的大小并将其剪切为三角形。我怎么用javascript做这个？

这大约是我想要完成的事情（显然这将是一条直线，但这是我在油漆方面做得最好的）：

这是我到目前为止的代码： HTML：<div id = "mydiv"></div> Javascript：

document.getElementById("mydiv").onclick = moulding_change('5f52a13c425655fa62058418542b95ca');

function moulding_change(thumb)
{

var ppi = 15;

var SITE_URL = "http://www.asa.tframes.org:1881";

  var img = new Image();
  img.src =  SITE_URL + '/system/components/compimg/' + thumb + '/pattern';
  img.onload = function() {
    console.log("width before " + this.width);
    //width needs to be the same as the height (in this case 450)
    img.width = img.height / ppi;
    //img.width = img.height;
    img.height /= ppi;
    console.log("width after " + this.width);
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    canvas.style.position = "absolute";
    canvas.style.zIndex = 5;
    canvas.style.width = "1000px";
    canvas.style.height = "1000px";
      // Save the state, so we can undo the clipping
    ctx.save();

    // Create a shape, of some sort
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(img.width,0);
    ctx.lineTo(img.width,img.width);

    ctx.closePath();
    // Clip to the current path
    ctx.clip();

    ctx.drawImage(img, 0, 0);

    // Undo the clipping
    ctx.restore();
    $("#mydiv").append(canvas);
  };
}

Answer 1

感谢Geoff，我能够创建画布元素。问题最终是我没有指定图像的宽度和高度。