1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <script type="text/javascript" src="../js/jQuery.js"></script>
  7.     <style type="text/css">
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             outline: none;
  12.             border: none;
  13.         }
  14.         #canvas{
  15.             width: 7rem;
  16.             margin: .25rem 0 0 1.5rem;
  17.             border: 1px solid black;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <canvas id="canvas" width="1000" height="600"></canvas>
  23. </body>
  24. </html>
  25. <script type="text/javascript">
  26.     /**
  27.      * rem 布局初始化
  28.      */
  29.     $('html').css('font-size', $(window).width()/10);
  30.     /**
  31.      * 获取 canvas 画布
  32.      * 获取 canvas 绘图上下文环境
  33.      */
  34.     var canvas = $('#canvas')[0];
  35.     var cxt = canvas.getContext('2d');
  37.     /**
  38.      * 文字的书写
  39.      * fillText(要写的文字, 文字开始的横坐标, 文字开始的纵坐标, 文字占用的最长宽度)
  40.      * strokeText(要写的文字, 文字开始的横坐标, 文字开始的纵坐标, 文字占用的最长宽度)
  41.      * font 字体大小和样式
  42.      */
  44.     /*
  45.      * font参数的值分为
  46.      * font-style: normal(正常), italic(斜体字), oblique(倾斜字体) 后两种在网页端一般没什么区别
  47.      * font-variant: normal(正常), small-caps(英文小写字母变成小的大写)
  48.      * font-weight: normal(正常), bold(加粗) 100-900(一般不用)
  49.      * font-size: 文字大小
  50.      * font-family: 字体样式
  51.      */
  52.     cxt.font = "oblique small-caps bold 50px Arial";
  54.     cxt.fillStyle = "blue";
  55.     cxt.fillText("Hello Canvas!" ,100, 100, 200);
  57.     cxt.strokeStyle = 'blue';
  58.     cxt.strokeText("Hello Canvas!", 100, 300, 200);
  59. </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. 【maven】Maven中的dependencyManagement

    dependencyManagement使用简介 Maven中的dependencyManagement元素提供了一种管理依赖版本号的方式.在dependencyManagement元素中声明所依赖的 ...

  2. pycharm -- 导入主题(theme) and 修改背景颜色（护眼色）

    前情提要 众所周知,随着python语言的不断流行,越来越多的程序员开始用python来开发自己的项目以及产品. pycharm作为一款流行的IDE,被越来越多的程序员所接受和使用. 尽管pychar ...

  3. mysql 严格模式 Strict Mode说明

    1.开启与关闭Strict Mode方法 找到mysql安装文件夹下的my.cnf(windows系统则是my.ini)文件 在sql_mode中增加STRICT_TRANS_TABLES则表示开启严 ...

  4. Git中特别的命令

    Rebase 假设我们的分支结构如下: rebase 会把从 Merge Base 以来的所有提交,以补丁的形式一个一个重新达到目标分支上.这使得目标分支合并该分支的时候会直接 Fast Forwar ...

  5. 快速接入PHP微信支付

    微信支付是微信开发中坑最多的一个功能,本文旨在帮助有开发基础的人快速接入微信支付,如果要详细了解微信支付,请看微信支付的开发文档. 再说把开发文档搬到这里来就没必要了.想要快速跑通微信支付的可以继续查 ...

  6. java操作Excel之POI（3）

    一.字体处理 /** * 字体处理 */ public static void main(String[] args) throws Exception { Workbook wb = new HSS ...

  7. jquery的load()事件和ajax中load()方法的区别

    load事件 当图像加载时,改变 div 元素的文本: $("img").load(function(){ $("div").text("Image ...

  8. java中使HttpDelete可以发送body信息

    java中使HttpDelete可以发送body信息RESTful api中用到了DELETE方法,android开发的同事遇到了问题,使用HttpDelete执行DELETE操作的时候,不能携带bo ...

  9. 1108 Finding Average （20 分）

    1108 Finding Average (20 分) The basic task is simple: given N real numbers, you are supposed to calc ...

  10. [UE4]崩溃的原因收录

    UTool tool; 这样声明可以编译通过,但是UE4 Editor会直接崩溃. 应该改成这样: UTool* tool;