html
<div>
<canvas id="trails" width="200" height="170"> </canvas>
</div>
js
<script>
var canvas = document.getElementById("trails");
var test = canvas.getContext("2d");
var img = new Image();
// 添加四个角的坐标,最后要回到起始点坐标
test.moveTo(0, 0); //moveTo()起始位置
test.lineTo(200, 0); //lineTo()路径位置
test.lineTo(140, 170);
test.lineTo(0, 170);
test.lineTo(0, 0);
img.onload = function () { //要让图片先加载完再填充
var pat = test.createPattern(img, "no-repeat",);
test.fillStyle = pat;
test.fill();
}
img.src = "image/yingren_8.png";
</script>
