<!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的更多相关文章

  1. html5 canvas 笔记二（添加样式和颜色）

    色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...

  2. HTML5 <Canvas>文字粒子化

    文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  3. HTML5 Canvas 中的颜色、样式和阴影的属性和方法

    颜色.样式和阴影的属性与方法 fillStyle                设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle         设置或返回用于笔触的颜色.渐变或模式 ...

  4. HTML5 Canvas ( 文字的度量 ) measureText

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  7. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  8. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. HTML5 progress元素的样式控制、兼容与实例

    一.progress元素基本了解 基本UIprogress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持.如下简单code: <progress>o(︶︿︶)o< ...

随机推荐

  1. CTF-练习平台-Misc之 再来一道隐写

    十二.再来一道隐写 下载文件后打开,用常用的几个方法都没有找到有用的信息,然后观察图片发现搞度有点低,所以用WinHex打开把图片高度改大,保存.再次打开图片发现flag

  2. 一键分享到各个SNS插件

    使用百度分享:http://share.baidu.com/code/advance#toid 例: HTML: <div class="bdsharebuttonbox" ...

  3. vault 集群搭建（active standby 模式)

        参考架构图: consul server cluster 搭建 consul 基本配置格式 { "server": true, "node_name": ...

  4. php 使用 file_exists 还是 is_file

    Jesns 提出 file_exists 比较老了,建议使用 is_file 来判断文件. 经过我的测试,is_file 果然快很多,以后可以改 is_file 来判断文件. 还有相关链接: is_f ...

  5. Linux 下V4l2摄像头采集图片，实现yuyv转RGB,RGB转BMP，RGB伸缩，jpeglib 库实现压缩RGB到内存中，JPEG经UDP发送功(转)

    ./configure CC=arm-linux-gnueabihf-gcc LD=arm-linux-gnueabihf-ld --host=arm-linux --prefix=/usr/loca ...

  6. java编译需要文件后缀名.java 而运行不需要后缀名.class

    对于java源文件HelloWorld.java编译命令:javac HelloWorld.java运行命令:java HelloWorld 编译需要文件后缀名.java 而运行不需要后缀名.clas ...

  7. module.exports用法

    module.exports 对象是由模块系统创建的.在我们自己写模块的时候,需要在模块最后写好模块接口,声明这个模块对外暴漏声明内容,module.exports提供了暴漏接口的方法. 1.返回一个 ...

  8. 一个spring boot集成dubbo的小例子

    请移步github,介绍和代码均在上面了:https://github.com/wuxun1997/voicebox 这里再多说两句.github上的这个小例子默认使用组播作为注册中心,你也可以把组播 ...

  9. WIN7 X64 下 VS2008升级补丁 (显示隐藏按钮)

    原文地址:http://blog.sina.com.cn/s/blog_57b5da120100gk7l.html 更新列表: 2010年3月26日:增加对日文版的支持. 2010年3月3日:更新代码 ...

  10. 【Spring学习笔记-3.1】让bean获取spring容器上下文(applicationContext.xml)

    *.hl_mark_KMSmartTagPinkImg{background-color:#ffaaff;}*.hl_mark_KMSmartTagBlueImg{background-color:# ...