为了响应淘宝KISS理念,为中国开源做小点贡献,故有此文。
主要内容就是实现canvas显示文字,并做好这件简单的事。
策划总是会提出各种需求,如果是dom结构,直接用css样式就可以实现,现在canvas怎么办呢?本文以此为切入点,实现了常规dom里面的样式接口。现列出如下:
top, left
width, height // 自适应并换行
text-align
text-indent
line-height
letter-spacing
font-size
font-weight
font-family
color
现在策划这时还要站出来,我要显示一句话内包含二处高亮,二处大字体,一处粗体,一处隶书。。。
我们就SB了,但我们不能坐以待毙啊,本着不会美术的策划不是好程序的心态,咱们得搞定他。
这时候可能有人会怀念dom,直接用<span style="..."></span>多好啊,或者wiki写法
你好吗,也行啊。。现在肿么办?一句话分成若干个文字精灵?再排位置?如果是动态新闻呢?天天得换啊??
好吧,经过我们若干一行人的讨论,使用类wiki的写法,实现思路最后说:
引用
“作为公司[color=#F00;weight=bold;size=16;font=隶书]老板[/],努力发展自己的公司吧!给公司起个好[color=red]名字[/],建造属于自己的[size=18]超级公司[/]。”
啊,世界清静了,现在你满意了吧!
最后再介绍下实现思路:
每个文字精灵会用到两个canvas,A保存文字(下次draw的时候直接ctx.drawImage()),B生成A的过程中间用。
首先格式化文字,得到一个下面的数组:
[{
char: '作'
}, {
char: '为'
}, {
char: '公'
}, {
char: '司'
}, {
char: '老',
color: '#F00',
weight: 'bold',
size: 16,
font: '隶书'
}, {
char: '板',
color: '#F00',
weight: 'bold',
size: 16,
font: '隶书'
}, {
// ...
}]
然后画在B上,再getImageData,存在数组里面;
最后一步是实现css样式的关键,根据各样式值,把这些字(当图片)画在A上,然后文字精灵画的时候,只需调用ctx.drawImage(A, ...)就可以了。
为什么我们一直追求文字图片化呢?性能更高吗?请参考这个链接
www.dzone.com/links/r/html5_canvas_drawtext_considered_harmful.html。
希望有招一日,浏览器能从底层支持;
希望对你有帮助!
- 大小: 10.7 KB
分享到:
相关推荐
基于画布的选取框组件 安装 npm i canvas-marquee -S 用法 import Marquee from 'canvas-marquee' ; var textList = [ '跑马灯' , '666' , '233333333' , 'javascript' , 'html' , 'css' , '前端框架' , 'Vue' , '...
新建一个C++Builder项目 设置Form1的font为“宋体,小五” 在Form1中添加一个TRadioGroup组件rgDrawWhat供选择画什么图形;添加一个Tbutton组件colorBtn和一个TcolorDialog组件ColorDialog1;添加一个TImage组件...
Jpeg.Canvas.Font.Family = "Courier New" 字体 Jpeg.Canvas.Font.Bold = True 是否加粗 Jpeg.Canvas.Print 10, 10, "Copyright (c) XYZ, Inc." 打印坐标x 打印坐标y 需要打印的字符 以下是对图片进行...
Jpeg.Canvas.Font.Family = "Courier New" 字体 Jpeg.Canvas.Font.Bold = True 是否加粗 Jpeg.Canvas.Print 10, 10, "Copyright (c) XYZ, Inc." 打印坐标x 打印坐标y 需要打印的字符 以下是对图片进行边框处理 ...
Dim Jpeg ””//声明变量 Set Jpeg = Server.CreateObject(“Persits.Jpeg”) ””//调用组件 Jpeg.Open Server.MapPath(“aaa.JPG”) ””//源图片位置 Jpeg.Canvas.Font.Color = &H000000 ””//水印字体颜色 ...
Jpeg.Canvas.Font.Bold = False ''''//是否粗体,粗体用:True Jpeg.Canvas.Font.BkMode = &HFFFFFF; ''''//字体背景颜色 Jpeg.Canvas.Print 10, 10, "不败顽童工作室" ''''//水印文字,两个数字10为水印的xy座标...
Dim Jpeg ””//声明变量 Set Jpeg = Server.CreateObject(“Persits.Jpeg”) ””//调用组件 Jpeg.Open Server.MapPath(“aaa.JPG”) ””//源图片位置 Jpeg.Canvas.Font.Color = &H000000 ””//水印字体颜色 ...
背景 近期在开发小程序中,接触最多的就是 ...小程序的内容大多是渲染在 WebView 上的,如果把 WebView 看成单独的一层,那么由系统自带的这些原生组件则位于另一个更高的层级(如 canvas、video)。两个层级是完全独
如果要测试此附加组件,请访问显示指纹的网站(即webbrowsertools.com/font-fingerprint/)。 每次重新加载页面时,您都会看到一个新的假指纹。 此扩展程序是与“ Canvas Fingerprint Defender”的作者合作完成的:...
介绍C7基于HTML<canvas>重新实现了现代前端开发的关键技术(没有任何第三方库),它包括: XML 中描述的 10 个常用组件(例如 <button>、<image> 甚至 <input>) Flex 布局和常用的 CSS MVVM 开箱即用的...
图表对象(完整): /*miniChart Object = { "animation": true / false, "canvas": canvas Object, "chartType": pie/line/bar, "feedback":true, //interactive when mouse on "feedbackStyle":[font,fontColor,...
用于截断JSX标记的React组件。 为什么? 很少有使用JS截断而不是CSS截断的用例: 您需要支持IE,Firefox或Edge(并且不能使用webkit-line-clamp )进行多行截断 您需要一个自定义的省略号,可能带有更多的文本( ...
高效的渲染底层,自适应WebGl和Canvas两种模式 丰富的底层核心功能,涵盖绝大部分游戏开发需求 不断丰富的插件库,让游戏开发更加便捷、简单青瓷引擎功能 基于浏览器的编辑器 所见即所得的实时调试功能...
private void drawTextStepString(Canvas canvas, float centerX) { Paint vTextPaint = new Paint(); vTextPaint.setTextSize(dipToPx(16)); vTextPaint.setTextAlign(Paint.Align.CENTER); vTextPaint....
Delphi ListView基本用法大全(转)默认分类 2009-09-29 09:27:56 阅读138 评论0 字号:大中小 订阅 Delphi高级编程 Delphi文章 WEB开发 Delphi控件 ... Sender.Canvas.Font.Color := clred;
// 定义一个创建canvas组件的函数 var createCanvas = function(rows , cols , cellWidth, cellHeight) { tetris_canvas = document.createElement("canvas"); // 设置canvas组件的高度、宽度 tetris_canvas....
g.setFont(new Font("宋体",Font.BOLD,36)); g.drawString("我改变了字体",20,50);//在Java Applet中绘制一行文字:“我改变了字体” } }实验3 联合编译 2.模板代码 public class MainClass { public static...