首页 > 其他分享 >Sprite标签(Canvas作为贴图)批量标注设备模型

Sprite标签(Canvas作为贴图)批量标注设备模型

时间:2024-09-10 09:20:38浏览次数:13  
标签:贴图 Canvas const Sprite arr 0.5 canvas num name

一、效果

二、第一步:canvas.js中封装canvas函数,生成一个canvas对象,标注文字为参数name

unction createCanvas(name) {
    /**
     * 创建一个canvas对象,绘制几何图案或添加文字
     */
    const canvas = document.createElement("canvas");
    const arr = name.split(""); //分割为单独字符串
    let num = 0;
    const reg = /[\u4e00-\u9fa5]/;
    for (let i = 0; i < arr.length; i++) {
        if (reg.test(arr[i])) { //判断是不是汉字
            num += 1;
        } else {
            num += 0.5; //英文字母或数字累加0.5
        }
    }
    // 根据字符串符号类型和数量、文字font-size大小来设置canvas画布宽高度
    const h = 80; //根据渲染像素大小设置,过大性能差,过小不清晰
    const w = h + num * 32;
    canvas.width = w;

标签:贴图,Canvas,const,Sprite,arr,0.5,canvas,num,name
From: https://blog.csdn.net/qq_35430208/article/details/141160608

相关文章

  • 【Canvas与电脑桌面】白褐橘三色立方桌面(1920*1080)
    【成图】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>白褐橘三色立方桌面Draft1</title><styletype="text/cs......
  • OpenGL ES通过缩小GLSurfaceView来解决纹理贴图变形的问题
    一、概述在使用OpenGLES做纹理贴图的时候,图片有小有大。默认情况下纹理是撑满整个屏幕的。这就导致大图会被压扁、小图会被拉伸。这种体验相当不好。解决此问题的其中一种方式是:通过缩小GLSurfaceView的宽或高来解决问题。ps:公式可以看做是固定的,直接使用即可。......
  • 在虚幻引擎(UE5)中使用HDR贴图_UE5教程
    一共有两种文件格式,推荐使用hdr格式,先讲hdr格式先创建一个材质,名称随意双击打开,把着色模型改为无光照拖入hdr贴图,此时会报错创建三维向量转换为参数,此时已经可以正常显示了,但是增加一些可调节参数一个对比度一个光照强度,转换为参数创建材质实例,双击打开打开双面材质创建......
  • canvas版本中国象棋,象棋的棋子控制还是复杂一些
    代码:<!Doctypehtml><htmllang="zh_cn"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>中国象棋</title><metaname="Key......
  • Canvas绘制图片合成样式
    效果图web*{margin:0;padding:0;}.container{position:relative;width:328px;height:328px;margin:100pxauto;}.containerimg{position:absolute;width:328px;height:328px;}#canvas{posi......
  • 【Canvas与钟表】干支表盘
    【成图】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>387.干支表盘</title><styletype="text/css"......
  • Canvas绘制线条时断断续续的
    解决线条断断续续的关键代码如下:我们可以使用quadraticCurveTo来实现贝塞尔曲线使其变成光滑的曲线注意:ctx.value.lineCap="round";           ctx.value.lineJoin="round";   这两个属性是必须设置的      lastX,lastY:贝塞尔曲线的起始......
  • 富文本编辑器 实现CTRL+V粘贴图片并上传、WORD粘贴带图片
    编辑器:百度ueditor前端:vue2,vue3,vue-cli,html5需求:复制粘贴word内容图片,word图片转存交互要求:开源,免费,技术支持用户体验:Ctrl+V快捷键操作该说不说,最近这块应该也是挻火的,今天早上又有网友加我微信私聊,说是想了解一下这块的技术和方案。实际我的微信号之前就已经在网上......
  • 【Canvas与艺术】四叶花
    【成图】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>386.四叶花</title><styletype="text/css"&......
  • Canvas艺术之旅:了解几个绘制基本图形的 API
    了解几个绘制基本图形的APICanvas是HTML5提供的绘画API,可以用于在Web页面上绘制各种基本图形。本文介绍一些Canvas绘制基本图形的API:前置条件注意:本文章所提供的代码示例默认已经进行了canvas元素定义,DOM获取以及canvas的上下文获取,以下进行代码演示时将......