canvas中实现字体描边

最新推荐文章于 2024-04-11 16:07:30 发布

置顶 WEB嘟嘟

最新推荐文章于 2024-04-11 16:07:30 发布

阅读量2.6k

点赞数

分类专栏：笔记文章标签： canvas html js vue vue.js

本文链接：https://blog.csdn.net/qq_24537119/article/details/111942295

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在做项目的时候，我使用了text-strok这个css属性实现了字体描边的效果，但是当用html2canvas将DOM元素转成为canvas的时候却发现字体描边是没有出现的，当然，canvas2html这个插件并不是截图。只是利用了canvas 的方法，读取了DOM元素里面的属性然后转换成为canvas，既然这个字体描边没有出现，那么就说明，在canvas中不支持字体描边，在经过一系列的搜索之后发现，其实canvas是支持字体描边的，但是不支持设置字体描边的宽度，你无法达成像PS中一样的效果，无法还原像text-strok这个css属性的效果，网上很多的关于字体描边的如果是canvas都是建议使用字体阴影实现的。但是依然还有这种情况的出现

而且这个描边无法手动修改的更宽，一旦过宽就会直接暴露。下面这种方法也是在网上查找的，应该是最最接近我们想要的一种解决方案了

虽然周围不可避免的有一些阴影的感觉，但是这个是目前能够找到的最好的方法了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h1 id="strok">这是一个描边的字体</h1>

    <button οnclick="addStrok()">增加阴影</button>

    <button οnclick="cutStrok()">减小阴影</button>

    <button οnclick="addFont()">字号增大</button>

    <button οnclick="cutFont()">字号减小</button>

</body>

</html>

<script>

    let color = '#f45'

    let txt_w = 10

    let font_size = 14

    let shadow_txt = `0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color};`

    strok.setAttribute("style",'text-shadow:'+shadow_txt+';font-size:'+font_size+'px')

    function addStrok(){

        txt_w ++

        let shadow_txt = `0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color};`

        strok.setAttribute("style",'text-shadow:'+shadow_txt+';font-size:'+font_size+'px')

    }

    function cutStrok(){

        txt_w --

        let shadow_txt = `0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color},0 0 ${txt_w}px ${color};`

        strok.setAttribute("style",'text-shadow:'+shadow_txt+';font-size:'+font_size+'px')

    }

    function addFont(){

        font_size ++

        strok.setAttribute("style",'text-shadow:'+shadow_txt+';font-size:'+font_size+'px')

    }

    function cutFont(){

        font_size --

        strok.setAttribute("style",'text-shadow:'+shadow_txt+';font-size:'+font_size+'px')

    }

</script>

WEB嘟嘟

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas中实现字体描边

在做项目的时候，我使用了text-strok这个css属性实现了字体描边的效果，但是当用html2canvas将DOM元素转成为canvas的时候却发现字体描边是没有出现的，当然，canvas2html这个插件并不是截图。只是利用了canvas 的方法，读取了DOM元素里面的属性然后转换成为canvas，既然这个字体描边没有出现，那么就说明，在canvas中不支持字体描边，在经过一系列的搜索之后发现，其实canvas是支持字体描边的，但是不支持设置字体描边的宽度，你无法达成像PS中一样的效果，无法还原像te
复制链接

扫一扫