|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
测试使用中觉得,textcanvas 生成的画布成品如果可以定义 canvas 背景色、内边距,其实用性会更好一些。
关于背景,相当于给 canvas 画布着个底色,但是不是给 canvas 标签加个 CSS background 属性,那个作用有效,需要给画布画一个带颜色的矩形,生成的成品才真正被认可。当然,background 属性可以在 DOM 中生效,但想让 ThreeJS 接收为纹理贴图,那不管用。
背景在配置中的键名是 bg,例如,bg: 'olive',或者用带透明的 rgba,bg: 'rgba(0, 60, 100, 0.5)',配置代码随意放在什么地方,一般建议跟在字体设置之后。
关于内边距,设计成xy两个方向,x 指向左右,y 指向上下,键名为 padding,例如,padding: { x: 35, y: 40 },这表示文本左右各留出 35px、上下各留出 40px 的空间,注意xy值是数值,不带 px 单位。
下面是代码示例,运行效果放在二楼:
- <style>
- #papa { margin: 30px auto; width: 1024px; height: 640px; background: #eee; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
- canvas { border: 1px solid gray; }
- </style>
- <div id="papa"></div>
- <script type="module">
- import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas1.js';
- const str = `ABCDEFG abcdefg\n0123456789\n甲乙丙丁戊己庚辛壬癸`;
- const config = {
- font: 'bold 40px "KaiTi", sans-serif',
- align: 'center', // 文本对齐,可选值 :left, center, right
- padding: { x: 30, y: 40 },
- bg: 'rgba(20,40,180,0.25)',
- gradient: {
- type: 'radial', // 渐变类型,可选 linear 或 radial
- value: [160, 85, 30, 160, 85, 160], // 渐变坐标
- // 渐变色标
- color: [
- { offset: 0, color: 'orange' },
- { offset: 0.35, color: 'magenta' },
- { offset: 0.7, color: 'darkgreen' },
- { offset: 1, color: 'yellow' }
- ]
- },
- fill: true, // 是否填充,false不填充
- shadowX: 1, // 阴影X偏移量
- shadowY: 1, // 文本Y偏移量
- shadowBlur: 2
- };
- const mycanv = textcanvas(str, config);
- //console.log(mycanv.width, mycanv.height); //查看canvas画布宽高尺寸
- papa.appendChild(mycanv);
- </script>
复制代码
|
评分
-
| 参与人数 4 | 威望 +140 |
金钱 +280 |
经验 +140 |
收起
理由
|
花飞飞
| + 30 |
+ 60 |
+ 30 |
很给力! |
杨帆
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
梦江南
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|