canvas实现遮罩效果

今天做的一个网页要实现图片以平行四边形的样子展现出来，但是切图的时候要切成普通的图片，想了很久，最后是通过canvas绘制两个三角形来完成遮罩的效果。

最终效果图：



提供的素材图片



好了，那么开始实现这种效果了

1 . 将页面的结构写好，两个三角形的canvas画布和一张图片

<div class="m-img">
<canvas id="m-triangle2" width="640px" height="100px">      </canvas>
<img src="images/1.jpg" width="640px">
<canvas id="m-triangle" width="640px" height="100px"></canvas>
</div>

2 . 通过canvas画一个正直角三角形和一个倒直角三角形

<script>
//正直角三角形
var canvas = document.getElementById("m-triangle");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 100);
ctx.lineTo(640, 100);
ctx.closePath();
ctx.fillStyle = '#fff';
ctx.fill();

//倒三角直角形
var canvas2 = document.getElementById("m-triangle2");
var ctx2 = canvas2.getContext("2d");
ctx2.beginPath();
ctx2.moveTo(0, 0);
ctx2.lineTo(640, 100);
ctx2.lineTo(640, 0);
ctx2.closePath();
ctx2.fillStyle = '#fff';
ctx2.fill();
</script>

这里canvas的用法就不多介绍了，直接解释下直角三角形的画法。首先看正直角三角形， 通过ctx.moveTo(0, 0);确定原点位置，然后通过ctx.lineTo(0, 100);向y轴画100px的线，最后画（640，100）完成三角形的闭合。然后填充颜色就ok了。倒三角形的原理也是一样的。



3 . 最后通过css将它们的位置确定一下

.m-img {
width: 640px;
margin: 40px auto;
position: relative;
}

#m-triangle {
position: absolute;
bottom: 0;
left: 0;
}

#m-triangle2 {
position: absolute;
top: 0;
left: 0;
}

4 . 大功告成，华丽丽的效果就这样实现了。但是角的部分还是有点瑕疵，不知道怎么解决。这里附上Demo的下载地址：

http://download.csdn.net/detail/a46262563/8992299