如何使用 css 来设置文字描边亿以达到 canvas 中设置文字外描边的效果?

2023-10-07 11:38:31 +08:00
 overdev

实际上我要通过使用富文本编辑器来实现不同风格的文本,但是我发现并没有一个富文本编辑器可以设置文本描边,于是我想编写一个关于文字描边的插件.但是我不知道如何通过 css 来设置文本描边来得到这样的效果

<script setup lang="ts">
import { onMounted } from 'vue'
import Konva from 'konva';
const konvaInit = () => {
  const stage = new Konva.Stage({
    container: 'target',
    width: 400,
    height: 400
  })
  var layer = new Konva.Layer();

      var simpleText = new Konva.Text({
        x: 0,
        y: stage.width() / 2,
        text: 'Simple Text',
        fontSize: 50,
        fontFamily: 'Calibri',
        fill: 'green',
        stroke: 'white',
        strokeWidth: 10,
        lineJoin: 'round',
        fillAfterStrokeEnabled: true
      });
      layer.add(simpleText);

      stage.add(layer);
}

onMounted(konvaInit)
</script>

<template>
  <div class="test">
    test text
  </div>
  <div class="test2">
    test text
  </div>
  <div id="target" class="text3"></div>
</template>

<style scoped>
.test {
  font-size: 80px;
  color: black;
  text-shadow: -10px -10px 10px blue,
    10px -10px 10px blue,
    -10px 10px 10px blue,
    10px 10px 10px blue;
}

.test2 {
  font-size: 80px;
  color: black;
  -webkit-text-stroke: 10px blue;
}

.text3 {
  width: 400px;
  height: 400px;
  background-color: black;
}
</style>

1244 次点击
所在节点    CSS
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/979436

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX