用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. Scala的第一步

    第一步:学习使用Scala解释器 开始Scala最简单的方法是使用Scala解释器,它是一个编写Scala表达式和程序的交互式“shell”.在使用Scala之前需要安装Scala,可以参考 Firs ...

  2. iptables原理详解(一)

    iptables简介 netfilter/iptables(简称为iptables)组成Linux平台下的包过滤防火墙,与大多数的Linux软件一样,这个包过滤防火墙是免费的,它可以代替昂贵的商业防火 ...

  3. iOS开发学习概述及知识整理

    设计师设计出来了一个不错的引导界面,然而当我看到设计稿的时候,我们的app也没几天就要上线了.这个界面模仿了Evernote iOS app的风格. 我以迅雷不及掩耳盗铃之势开始在Xcode上编程,用 ...

  4. web前端基础篇⑩

    1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...

  5. goldengate for big data 12.3发布

    主要新增特性:通用JDBC目标端:支持Amazon Redshift & IBM Netezza Oracle GoldenGate for Big Data 12.3现在支持通用的JDBC目 ...

  6. wchar_t内置还是别名?小问题一则(升级公司以前代码遇到的问题)

    问题: 原来的2008工程用2010编译后,运行程序出现无法定位程序输入点 *@basic_string@_WU@*和*@basic_string@G@* 解决: 关闭“语言选项”中“将WChar_t ...

  7. xml配置文件的读写

    using System.Xml; //----------------------------------------------读出XML文件中的节点值 XmlDocument xmlDoc = ...

  8. Mac下设置系统PATH

    1. 进入当前用户的home目录 输入cd ~ 2. 创建.bash_profile 输入touch .bash_profile 3. 编辑.bash_profile文件 输入open -e .bas ...

  9. 一维码生成 c# winform GUI

    最近看到同事小红在做一维码,感觉挺好玩,于是就在网上找了一个例子来玩玩. 下面的代码均为网上的代码,做了一些整理,但是忘记了出处,原作者看到可以提醒我,谢谢. 首先,一维码的相关知识可以先百度一下:h ...

  10. c# 远程连接ORACLE数据库

    使用该方法,只需要传入几个必要的参数就可以进行数据库的远程连接测试了,连接成功返回TRUE,失败返回false. 说明: 第一个参数表示你在数据库中的用户,具有可以登录权限的 第二个参数表示用户的密码 ...