canvas实现遮罩效果

最新推荐文章于 2023-08-13 19:29:21 发布

原创最新推荐文章于 2023-08-13 19:29:21 发布 · 8.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#triangle #网页 #canvas

【前端特效】专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用canvas绘制两个三角形作为遮罩，实现将普通图片以平行四边形形式展现的技术。包括HTML结构、canvas画图方法及CSS定位，以及效果优化建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做的一个网页要实现图片以平行四边形的样子展现出来，但是切图的时候要切成普通的图片，想了很久，最后是通过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