用canvas画字还是头一回,要想和UI设计的画的一模一样还是真有些苦难,不过现在实现的效果已经很像了。

<!--通过字体文件引入字体-->
<style>
@font-face {
font-family: TitilliumWeb-BoldItalic;
src: url(TitilliumWeb-BoldItalic.ttf);
}
@font-face {
font-family: TitilliumWeb-Light;
src: url(TitilliumWeb-Light.ttf);
}
</style>
<div>
<span style="font-family: TitilliumWeb-BoldItalic;">230ft<span>
<span style="font-family: TitilliumWeb-Light;">230ft<span>
</div>
<canvas id="textFont" height="2000px" width="1000px">

</canvas>
<script>
//获取dom节点
var c = document.getElementById("textFont");
//获取上下文
var ctx = c.getContext("2d");
//设置字体大小 及 字体类型 从定义好的字体中设置
ctx.font = "60px TitilliumWeb-Light";
//设置绘图的颜色
ctx.strokeStyle = '#ED2024';
//设置画笔填充颜色
ctx.fillStyle="#ED2024";
//设置字体的比例 宽和高的比例
ctx.scale(1.1,1)
//画字体的边框 描边
ctx.strokeText("230ft",100,200);
//填充字体
ctx.fillText("230ft",100,200);
</script>

canvas 画字的更多相关文章

  1. Android之自定义(上方标题随ViewPager手势慢慢滑动)

    最近很蛋疼,项目要模仿网易新闻的样式去做.上次把仿网易新闻客户端的下拉刷新写出来了,这次是ViewPager的滑动,同时ViewPager的上面标题下划线跟随者移动,本来通过ViewPager的OnP ...

  2. Android之自己定义(上方标题随ViewPager手势慢慢滑动)

    近期非常蛋疼,项目要模仿网易新闻的样式去做.上次把仿网易新闻client的下拉刷新写出来了.这次是ViewPager的滑动,同一时候ViewPager的上面标题下划线尾随者移动.本来通过ViewPag ...

  3. canvas ---个性时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. HTML5 Canvas Text实例1

    1.简单实例1 <canvas width="300" height="300" id="canvasOne" class=" ...

  5. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  6. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  7. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  8. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  9. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

随机推荐

  1. 算法-QuickSort

    #include <stdlib.h> #include <iostream> #include <vector> using namespace std; tem ...

  2. multipath tcp experiment

    git clone https://github.com/Neohapsis/mptcp-abuse.git sudo apt-get install python-pip sudo pip inst ...

  3. 使用Windows Form 制作一个简易资源管理器

    自制一个简易资源管理器----TreeView控件 第一步.新建project,进行基本设置:(Set as StartUp Project:View/Toolbox/TreeView) 第二步.开始 ...

  4. form input file 图片上传360IE兼容问题

    <form action="" class="form-box" class="form_box" enctype="mul ...

  5. NUBWO/狼博旺 NO-3000台式电脑耳机头戴式游戏电竞语音耳麦带话筒

    产品名称:NUBWO/狼博旺 NO-3000 套餐类型: 官方标配 颜色分类: 蓝色耳机(发光) 黑蓝7.1声道USB 黑色 黑蓝色(发光) 黑蓝色 黑蓝单插孔 白色(发光) 白色 佩戴方式: 头戴护 ...

  6. gantt甘特图的制作过程

    甘特图主要是用来做项目管理的,可以清楚的看到任务间的逻辑关系,任务与时间关系和任务间并行关系. 在甘特图中,横轴方向表示时间,纵轴方向并列着活动列表.图表内可以用线条.数字.文字代号等来表示计划(实际 ...

  7. java 接口和抽象类的区别

    java 接口和抽象类的区别抽象类:1.含有抽象方法的类一定为抽象类,反过来抽象类,不一定含有抽象方法:2.抽象类必须用abstract来进行定义,抽象方法也必须用abstract来进行定义:3.抽象 ...

  8. C++ Daily 《5》----虚函数表的共享问题

    问题: 包含一个以上虚函数的 class B, 它所定义的 对象是否共用一个虚函数表? 分析: 由于含有虚函数,因此对象内存包含了一个指向虚函数表的指针,但是这个指针指向的是同一个虚函数表吗? 实验如 ...

  9. 【转】C#多线程

    C#中的多线程编程 C#是.Net平台的通用开发工具,它能够建造所有的.Net应用.在.Net中所有线程都运行在应用程序域(AppDomain)中,这也许让你想到Win32进程,实际上它们还是有很大的 ...

  10. 什么是 kNN 算法?

    学习 machine learning 的最低要求是什么?  我发觉要求可以很低,甚至初中程度已经可以.  首先要学习一点 Python 编程,譬如这两本小孩子用的书:[1][2]便可.   数学方面 ...