HTML5代码如何制作马克笔效果 HTML5代码混合模式的应用实例-html教程-PHP中文网

HTML5代码如何制作马克笔效果 HTML5代码混合模式的应用实例

絕刀狂花

发布： 2025-10-26 22:50:02

原创

555人浏览过

html5代码如何制作马克笔效果 html5代码混合模式的应用实例

在HTML5中实现马克笔效果，主要依靠Canvas绘图技术与CSS的混合模式（mix-blend-mode）相结合。这种效果常用于高亮文本或图像区域，视觉上类似用荧光笔涂抹。下面介绍如何通过代码实现这一效果。

使用Canvas绘制马克笔轨迹

通过Canvas可以实时捕捉鼠标移动并绘制半透明、模糊边缘的线条，模拟真实马克笔的涂抹感。

关键点：

设置线条的globalAlpha为0.3~0.5，实现半透明效果
使用shadowBlur添加柔和边缘
选择明亮颜色如黄色、绿色模拟荧光笔

示例代码：

立即学习“前端免费学习笔记（深入）”；

<canvas id="canvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
<p>ctx.lineWidth = 30;
ctx.lineCap = 'round';
ctx.globalAlpha = 0.4;
ctx.shadowColor = 'yellow';
ctx.shadowBlur = 10;
ctx.strokeStyle = 'yellow';</p><p>let isDrawing = false;</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/%E8%85%BE%E8%AE%AF%E4%BA%91ai%E4%BB%A3%E7%A0%81%E5%8A%A9%E6%89%8B">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679975740787.png" alt="腾讯云AI代码助手">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/%E8%85%BE%E8%AE%AF%E4%BA%91ai%E4%BB%A3%E7%A0%81%E5%8A%A9%E6%89%8B">腾讯云AI代码助手</a>
                            <p>基于混元代码大模型的AI辅助编码工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="腾讯云AI代码助手">
                                <span>98</span>
                            </div>
                        </div>
                        <a href="/ai/%E8%85%BE%E8%AE%AF%E4%BA%91ai%E4%BB%A3%E7%A0%81%E5%8A%A9%E6%89%8B" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="腾讯云AI代码助手">
                        </a>
                    </div>
                <p>canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
});</p><p>canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
});</p><p>canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
</script>

登录后复制

利用CSS混合模式增强视觉融合

仅靠Canvas绘制可能显得生硬。结合CSS的mix-blend-mode: multiply或screen，可以让马克笔颜色与底层内容自然融合。

应用场景：

将Canvas层置于文字上方
设置Canvas的mix-blend-mode: screen，使重叠区域更亮，突出高亮感
若背景复杂，可用overlay提升对比度

CSS样式示例：

.container {
  position: relative;
}
<p>.text-content {
font-size: 24px;
color: #333;
padding: 40px;
}</p><h1>canvas {</h1><p>position: absolute;
top: 0;
left: 0;
mix-blend-mode: screen; /<em> 让黄色更通透亮眼 </em>/
}

登录后复制