canvas 画字
用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 画字的更多相关文章
- Android之自定义(上方标题随ViewPager手势慢慢滑动)
最近很蛋疼,项目要模仿网易新闻的样式去做.上次把仿网易新闻客户端的下拉刷新写出来了,这次是ViewPager的滑动,同时ViewPager的上面标题下划线跟随者移动,本来通过ViewPager的OnP ...
- Android之自己定义(上方标题随ViewPager手势慢慢滑动)
近期非常蛋疼,项目要模仿网易新闻的样式去做.上次把仿网易新闻client的下拉刷新写出来了.这次是ViewPager的滑动,同一时候ViewPager的上面标题下划线尾随者移动.本来通过ViewPag ...
- canvas ---个性时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- HTML5 Canvas Text实例1
1.简单实例1 <canvas width="300" height="300" id="canvasOne" class=" ...
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
随机推荐
- Scala的第一步
第一步:学习使用Scala解释器 开始Scala最简单的方法是使用Scala解释器,它是一个编写Scala表达式和程序的交互式“shell”.在使用Scala之前需要安装Scala,可以参考 Firs ...
- iptables原理详解(一)
iptables简介 netfilter/iptables(简称为iptables)组成Linux平台下的包过滤防火墙,与大多数的Linux软件一样,这个包过滤防火墙是免费的,它可以代替昂贵的商业防火 ...
- iOS开发学习概述及知识整理
设计师设计出来了一个不错的引导界面,然而当我看到设计稿的时候,我们的app也没几天就要上线了.这个界面模仿了Evernote iOS app的风格. 我以迅雷不及掩耳盗铃之势开始在Xcode上编程,用 ...
- web前端基础篇⑩
1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...
- goldengate for big data 12.3发布
主要新增特性:通用JDBC目标端:支持Amazon Redshift & IBM Netezza Oracle GoldenGate for Big Data 12.3现在支持通用的JDBC目 ...
- wchar_t内置还是别名?小问题一则(升级公司以前代码遇到的问题)
问题: 原来的2008工程用2010编译后,运行程序出现无法定位程序输入点 *@basic_string@_WU@*和*@basic_string@G@* 解决: 关闭“语言选项”中“将WChar_t ...
- xml配置文件的读写
using System.Xml; //----------------------------------------------读出XML文件中的节点值 XmlDocument xmlDoc = ...
- Mac下设置系统PATH
1. 进入当前用户的home目录 输入cd ~ 2. 创建.bash_profile 输入touch .bash_profile 3. 编辑.bash_profile文件 输入open -e .bas ...
- 一维码生成 c# winform GUI
最近看到同事小红在做一维码,感觉挺好玩,于是就在网上找了一个例子来玩玩. 下面的代码均为网上的代码,做了一些整理,但是忘记了出处,原作者看到可以提醒我,谢谢. 首先,一维码的相关知识可以先百度一下:h ...
- c# 远程连接ORACLE数据库
使用该方法,只需要传入几个必要的参数就可以进行数据库的远程连接测试了,连接成功返回TRUE,失败返回false. 说明: 第一个参数表示你在数据库中的用户,具有可以登录权限的 第二个参数表示用户的密码 ...