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< ...
随机推荐
- 【多线程学习笔记整理】002_线程的停止、暂停、与yield
一.停止线程的三种方式 停止线程是多线程中的一个很重要的点,停止线程意味着在线程处理完当前任务之前终止正在做的操作,但是如果不能正确的操作,可能会发生不可预期的结果. 1)使用退出标志,使线程正常退出 ...
- k8s dockerk个人学习(2)
部署nginx和应用 部署nginx时我们需要把nginx的配置文件那出来便于以后修改nginx的配置,放置nginx配置文件时我们用k8s的pv的存储方式来存放这些文件 1.安装nfs服务,在kub ...
- js循环总结
js原生的循环有两种,一般的for循环和for...in循环.还有一种常用jQuery.each()循环. 一. js原生循环 a. for循环,代码如下: var myArray = [1,2,3] ...
- redis sentinel 高可用（HA）方案部署，及python应用示例
redis sentinel(哨兵)高可用集群的部署方法,并通过 python 程序实例讲解如何使用 redis sentinel 简介 介绍 redis sentinel(哨兵)集群的部署,配置一主 ...
- adnanh webhook 框架使用
adnanh webhook 支持以下功能: 接收请求 解析header 以及负载以及查询变量 规则检查 执行命令 简单测试 使用docker-compose docker-compose 文件 ve ...
- log parser 微软iis 日志分析
Log Parser 2.2 您可以从 Microsoft 下载中心下载 Log Parser. Log Parser 2.2 是一个功能强大的通用工具,它可对基于文本的数据(如日志文件.XML 文件 ...
- 使用jsonp进行跨站点数据访问
使用jsonp 可以解决ajax 的跨域问题,使用起来比较简单. 具体的测试环境搭建如下 1.一个简单的MVC 站点 2.一个简单的html文件(这次的测试是在web 站点中,当然可以是一个简单的ht ...
- 使用 telnet 发邮件
我们都习惯了用邮件客户端软件或者登录到电子邮件站点进行收发邮件,现在尝试一下使用 Windows 自带的 Telnet 程序手工地发送一封简单的邮件,以此来稍微明白关于邮件发送的一些知识. 现在 E- ...
- RTSP HTTP RTP RTCP
RTSP简介 RTSP(Real Time Streaming Protocol)是由Real Network和Netscape共同提出的如何有效地在IP网络上传输流媒体数据的应用层协议.RTSP对流 ...
- 【转】每天一个linux命令（45）：free 命令
原文网址:http://www.cnblogs.com/peida/archive/2012/12/25/2831814.html free命令可以显示Linux系统中空闲的.已用的物理内存及swap ...