HTML5 Canvas ( 文字的书写和样式控制 ) font, fillText, strokeText
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* 文字的书写
* fillText(要写的文字, 文字开始的横坐标, 文字开始的纵坐标, 文字占用的最长宽度)
* strokeText(要写的文字, 文字开始的横坐标, 文字开始的纵坐标, 文字占用的最长宽度)
* font 字体大小和样式
*/ /*
* font参数的值分为
* font-style: normal(正常), italic(斜体字), oblique(倾斜字体) 后两种在网页端一般没什么区别
* font-variant: normal(正常), small-caps(英文小写字母变成小的大写)
* font-weight: normal(正常), bold(加粗) 100-900(一般不用)
* font-size: 文字大小
* font-family: 字体样式
*/
cxt.font = "oblique small-caps bold 50px Arial"; cxt.fillStyle = "blue";
cxt.fillText("Hello Canvas!" ,100, 100, 200); cxt.strokeStyle = 'blue';
cxt.strokeText("Hello Canvas!", 100, 300, 200);
</script>
HTML5 Canvas ( 文字的书写和样式控制 ) font, fillText, strokeText的更多相关文章
- html5 canvas 笔记二（添加样式和颜色）
色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...
- HTML5 <Canvas>文字粒子化
文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
- HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
- HTML5 Canvas ( 文字的度量 ) measureText
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- HTML5 progress元素的样式控制、兼容与实例
一.progress元素基本了解 基本UIprogress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持.如下简单code: <progress>o(︶︿︶)o< ...
随机推荐
- 保存csv时, 不保留index
pd.to_csv('your.csv', index=False)
- jaeger 使用ElasticSearch 作为后端存储
jaeger 支持es 作为后端存储,这样对于查询.以及系统扩展是比较方便的 使用docker-compose 运行 环境准备 参考项目: https://github.com/rongfenglia ...
- DDD领域驱动设计 ---- 系列文章
C#进阶系列——DDD领域驱动设计初探(七):Web层的搭建 C#进阶系列——DDD领域驱动设计初探(六):领域服务 C#进阶系列——DDD领域驱动设计初探(五):AutoMapper使用 C#进阶系 ...
- hadoop之 map个数控制
hadooop提供了一个设置map个数的参数mapred.map.tasks,我们可以通过这个参数来控制map的个数.但是通过这种方式设置map的个数,并不是每次都有效的.原因是mapred.map. ...
- phper必知必会（二）
1.说说你对进程,线程以及协程的理解 进程:是系统进行资源分配和调度的基本单位,是基本操作系统结构的基础.进程是程序基本执行的实体.进程与进程之间是独立的,拥有完全独立的地址空间,进程的切换只发生在内 ...
- Netty源码分析之NioEventLoop(一)—NioEventLoop的创建
一.NioEventLoop的概述 NioEventLoop做为Netty线程模型的核心部分,从本质上讲是一个事件循环执行器,每个NioEventLoop都会绑定一个对应的线程通过一个for(;;)循 ...
- SpringCloud负载均衡笔记
SpringCloud的负载均衡组件用的是Ribbon,这个东西就是服务消费者.它只是一个配置用的中转器,放在 Zuul 和 Eureka Client 之间用来转发的,它里面写了好多规则,用来指定负 ...
- 学习笔记之Unit testing/Integration testing/dotnet test and xUnit
source code https://github.com/haotang923/dotnet/tree/master/src Unit testing C# code in .NET Core u ...
- [原]System.IO.Path.Combine 路径合并
使用 ILSpy 工具查看了 System.IO.Path 类中的 Combine 方法 对它的功能有点不放心,原方法实现如下: // System.IO.Path /// <summary&g ...
- while循环的讲解
条件语句有两种方式: if() 条件语句 switch() 条件语句 循环语句: for() 循环语句 for in 遍历队象属性的循环 while 循环 案例:算出1到10的和 1.var i= ...