<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> 绘制文字串</title>
</head>
<body>
    <canvas id="myCanvas" width="700" height="500" style="border:3px dashed #0094ff;"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
          ctx.fillStyle = "#f00";
          ctx.font = "italic 50px 黑体"
          ctx.textBaseline="top";
          ctx.fillText("填充绘制字符串", 0, 0);

ctx.strokeStyle = "#ccc";
          ctx.font = "italic 50px 黑体";
          ctx.textAlign = "start";//设置绘制字符串水平对齐方式,该属性支持start/end/left/right/center
          ctx.strokeText("绘制字符串边框", 0, 50);

</script>
</body>
</html>

html5绘制字符串的更多相关文章

  1. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  2. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  3. [C#绘图]在半透明矩形上绘制字符串

    首先要绘制一个半透明的矩形,用到的方法当然是FillRectangle().这个函数在调用的时候除了要指明要绘制的矩形外,还要指明填充矩形的背景色.具体的方法就是在绘制矩形的时候传给它一个画刷Brus ...

  4. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. 用HTML5绘制的一个星空特效图

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML5 绘制简单圆形 loading. . . .

    现在有很多的 loading 组件 什么js 等等 闲来没事就写一个 H5的 loading  有很多的Loading 是一张张图片 js 控制的  有了 canvas的 出现 你就可以体验不同之处了 ...

  7. Html5 绘制五星红旗

    Html5+JavaScript 在Canvas上绘制五星红旗,具体思路如下图所示: 绘制思路在上图中已有说明,具体代码如下: <script type="text/javascrip ...

  8. Html5 绘制旋转的太极图

    采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示: 具体思路和绘制逻辑,在上图中已有说明,代码如下: <script type="text/javasc ...

  9. Html5绘制时钟

    最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示: 具体思路在上图已有说明,代码如下: <script type="text/ja ...

随机推荐

  1. 微信小程序开发环境

    微信小程序开发环境 不忘初心,方得始终.初心易得,始终难守 小程序开发环境 开发工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devt ...

  2. 【翻译】std::list::remove - C++ Reference

    公有成员函数 std::list::remove void remove(const value_type& val); 删除与给定值相等的元素 从容器中删除所有与 val 值相等的元素.li ...

  3. Cocos 开发笔记

    经发现: cocos creator 提供的hello world 模版中.只有HelloWorkd.js中 properties 属性 text的值不是'hello world!' Label 组件 ...

  4. Educational Codeforces Round 27 A B C

    A. Chess Tourney   Berland annual chess tournament is coming! Organizers have gathered 2·n chess pla ...

  5. 【eclipse】聚合工程maven启动Tomcat报错

    严重: Error configuring application listener of class严重: Skipped installing application listeners due ...

  6. @SuppressWarings注解的作用和用法

    一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...

  7. The way to Go(7): 常量

    Reference: Github: Go Github: The way to Go 常量 常量使用关键字 const 定义,用于存储不会改变的数据. const identifier [type] ...

  8. BZOJ 1009: [HNOI2008]GT考试(kmp+dp+矩阵优化)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1009 题意: 思路:真的是好题啊! 对于这种题目,很有可能就是dp,$f[i][j]$表示分析到第 ...

  9. 【NOI2013】树的计数

    Description 我们知道一棵有根树可以进行深度优先遍历(DFS)以及广度优先遍历(BFS)来生成这棵树的DFS序以及BFS序.两棵不同的树的DFS序有可能相同,并且它们的BFS序也有可能相同, ...

  10. go 并发

    package main import ( "fmt" "time" ) func say(s string) { ; i < ; i++ { time. ...