<!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. cglib 多重 代理示例-2

    from:  http://thinkinjava.cn/2018/10/%E4%BD%BF%E7%94%A8-Cglib-%E5%AE%9E%E7%8E%B0%E5%A4%9A%E9%87%8D%E ...

  2. LeetCode Majority Element Python

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  3. adnanh webhook 框架 hook 定义

    Hook hook 是一个SON对象.钩子对象必须包含id和execute-command属性.所有其他属性都被视为可选. 属性 id - 指定hook的ID.方式格式(http://server:p ...

  4. 用 c 写 CGI 程序简要指南

    文章摘要:  CGI规定了Web服务器调用其他可执行程序(CGI程 序)的接口协议标准.Web服务器通过调用CGI程序实现和Web浏览器的交互.CGI程序可以用任何程序设计语言编写,如Shell脚本语 ...

  5. 为什么要用MQ

    现在公司系统在做微服务化,很多人在设计服务间通信时都会想到用MQ,然而有些人居然说不清楚为啥要用MQ? 其实用它主要是两点考虑: 1.应用解耦:两个服务间通过MQ通信,可以不用完全知道对方的存在,实现 ...

  6. JFrame 与 Frame

    JFrame是Frame的子类 Frame is part of java.awt package and exists since JDK1.0. JFrame is part of javax.s ...

  7. [转]Nginx负载均衡原理初解

    什么是负载均衡 我们知道单台服务器的性能是有上限的,当流量很大时,就需要使用多台服务器来共同提供服务,这就是所谓的集群. 负载均衡服务器,就是用来把经过它的流量,按照某种方法,分配到集群中的各台服务器 ...

  8. Keepalived stable tarball

    Keepalived stable tarball Keepalived for Linux - Version 1.3.5 - March 19, 2017 Keepalived for Linux ...

  9. EF 的一些不常用的功能

    1.Add-Migration Initia-IgnoreChanges 生成已有数据库初始化代码 2.update-database -verbose 升级数据库并显示sql语句 3.Update- ...

  10. Java中对话框的弹出

    最近在做学校的课程设计,java编程需要用到对话框弹出,第一反应是js中的alert和confirm,java的话瞬间懵,查阅学习总结如下,用以以后的学习 1.显示一个错误对话框,该对话框显示的 me ...