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的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
随机推荐
- 黑马程序员——OC语言基础语法 面向对象的思想
Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结)(一)基础语法 1)关键字 @interface.@implementati ...
- http_load
wget http://acme.com/software/http_load/http_load-12mar2006.tar.gz
- jQuery---中的动画
show():$('p').show(); show(1000) 里面加参数会让元素在显示的时候动起来 hide():$('p').hide(); hide(1000) 里面加参数让元素在隐藏的时候动 ...
- c语言计算矩阵特征值和特征向量-1(幂法)
#include <stdio.h> #include <math.h> #include <stdlib.h> #define M 3 //方阵的行数 列数 #d ...
- mkstemp生成临时文件
使用该函数可以指定目录生成临时文件,函数原型为 int mkstemp(char *template); 应用举例 int main(int argc, char *argv[]) { /* char ...
- win7配上的网关会自动消失?解决
前几天遇见一台计算机,发现手动设置的ip和网关等...在使用了一会就变成,网关丢失,其他不变...奇怪啊...第一次遇见.后来找了一下.有答案了. 先将客户端卸载掉,再打开网络和共享中心-->本 ...
- 2014年6月份第2周51Aspx源码发布详情
AMX高效自定义分页控件(WinForm)源码 2014-6-9 [VS2008]2014.6.9更新内容: 1. 更改用户自定义分页控件功能布局.大大精简了调用分页自定义控件的代码,和使用系统 ...
- 第十章 嵌入式Linux的调试技术
对调试工具进行简介.Linux中提供了一类工具,通过这些工具可以逐行跟踪程序的代码,用于测试用户空间程序的gdb.gdbserver和调试内核空间程序的kgdb. 用gdb调试用户空间程序:gdb可跟 ...
- mySQL基本操作学习笔记(一)
...
- 静态变量static和extern外引用
静态变量--加static关键字的变量,特点: (1)在全局数据区中分配内存,每次对其值得修改都会保留结果,直至程序结束. (2)若静态变量没显示初始化,那会被自动初始化为0,并且只能初始化一遍. 1 ...