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< ...
随机推荐
- 《DSP using MATLAB》Problem 4.15
只会做前两个, 代码: %% ---------------------------------------------------------------------------- %% Outpu ...
- http协议详谈
scheme - 定义因特网服务的类型.最常见的类型是 httphost - 定义域主机(http 的默认主机是 www)domain - 定义因特网域名,比如 runoob.comport - 定义 ...
- Thrift 个人实战--Thrift 网络服务模型（转）
前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还 ...
- git 报错及解决
报错:fatal: refusing to merge unrelated histories==== 解决办法:git pull加上参数,如:git pull –allow-unrelated-hi ...
- hdu 6305 RMQ Similar Sequence——概率方面的思路+笛卡尔树
题目:http://acm.hdu.edu.cn/showproblem.php?pid=6305 看题解,得知: 0~1内随机取实数,取到两个相同的数的概率是0,所以认为 b 序列是一个排列. 两个 ...
- win7 X64 使用VS2008 ->编译报错LINK : fatal error LNK1000: Internal error during Incr的解决
编译报错LINK : fatal error LNK1000: Internal error during Incr的解决 Win7 旗舰版 Microsoft Visual Studio 2008 ...
- JsonCpp使用方法详解
JSON全称为JavaScript ObjectNotation,它是一种轻量级的数据交换格式,易于阅读.编写.解析.jsoncpp是c++解析JSON串常用的解析库之一. jsoncpp中主要的类: ...
- MySQL MHA环境搭建
MHA功能: 1,从故障的mysql保存二进制日志时间(binlog events);2,识别含有最新更新的slave:3,应用差异的中继日志(relay log)到其他的slave:4,应用从mas ...
- 字符串strip相关函数
s.strip(rm) 删除s字符串中开头.结尾处,位于 rm删除序列的所有字符,但只要遇到非rm序列中的字符就停止s.lstrip(rm) 删除s字符串中开头处,位于 rm删除序列的所有字符,,但只 ...
- 在HTML标签的事件后面直接写JS代码
<input type="button" onclick="document.getElementdByTagName('div')[0].innrtHTML='S ...