Three.js基于Canvas的文字贴图

居中对齐，对中文文字做了长度兼容处理，可根据开发需求自行构造Canvas贴图

 const createLabel = () => {const name = "马达加斯加的企鹅们正在快乐的玩耍";const canvas = document.createElement("canvas");const color = "#dddddd";const fontSize = 50;const r = fontSize / 2;const margin = fontSize / 2;const textMarginleft = 10;const height = fontSize * 2;const width =name.length * fontSize + 2 * margin + r * 2 + textMarginleft;canvas.height = height;canvas.width = width;const ctx = canvas.getContext("2d");// outctx.lineWidth = 3;ctx.beginPath();ctx.arc(margin + r, height / 2, r, 0, 2 * Math.PI);ctx.strokeStyle = color;ctx.stroke();ctx.closePath();// innerctx.beginPath();ctx.arc(margin + r, height / 2, 6, 0, 2 * Math.PI);ctx.fillStyle = color;ctx.fill();ctx.strokeStyle = color;ctx.stroke();// fontctx.font = `${fontSize}px Arial`;ctx.textAlign = "start";ctx.textBaseline = "middle";ctx.fillText(name, margin + r * 2 + textMarginleft, height / 2);return {height,width,canvas,};};const main = () => {const c = createLabel();const texture = new THREE.CanvasTexture(c.canvas);const spriteMaterial = new THREE.SpriteMaterial({map: texture,});const sprite = new THREE.Sprite(spriteMaterial);sprite.scale.set(c.width / 100, c.height / 100, 0);scene.add(sprite);};

Three.js基于Canvas的文字贴图相关推荐

skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件 skycons.js是一个开源的javascript天气动画图标渲染器.相当于gif动图一样. skycons CDN地址:https://w ...
html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
【Canvas】js用Canvas绘制漩涡螺旋图动画效果
学习JavaScript编程,会用Canvas画图吗,学会它,能画很多有趣的事物,可自由发挥想象,会发现图形学的美,收获很多,这里有一个例子,如何用canvas画漩涡螺旋图动图效果,接下来开始讲,边学 ...
133行代码实现质感地形(js,基于canvas)
原文地址:http://www.playfuljs.com/realistic-terrain-in-130-lines/ 写于2014年5月5日程序员们都喜欢创造一些东西,但是,还有什么会比创建一 ...
skycons.js 基于canvas的天气动态图标小插件
skycons是什么 skycons.js是一个开源的javascript天气动画图标渲染器.(特点就是动态的图标,敲黑板) skycons CDN地址:https://www.bootcdn.cn/ ...
原生js 基于canvas写一个简单的前端截图工具
先看效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
canvas 绘制动态雷达图
canvas 绘制动态雷达图最近收到一个需求,需要做一个预定的动态雷达图,于是绞尽脑汁,基于canvas 终于实现如图的效果: 图片效果: 我是基于vue 来实现的,现在让我们看看具体是如何实现的: ...
canvas换图时候会闪烁_基于Canvas实现的高斯模糊（上）「JS篇」
作者:iNahoo 转发链接:https://mp.weixin.qq.com/s/5TxPjznpEBku_ybSMBdnfw 目录基于Canvas实现的高斯模糊(上)「JS篇」本篇基于Canv ...
php 六边形属性图能力数值图,详解基于 Canvas 手撸一个六边形能力图
一.前言六边形能力图如下,由 6 个六边形组成,每一个顶点代表其在某一方面的能力.这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图.当然,你也可以基于其他开源的 js 方案来 ...

Three.js基于Canvas的文字贴图

Three.js基于Canvas的文字贴图

Three.js基于Canvas的文字贴图相关推荐

最新文章

热门文章