<!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. P1852 [国家集训队]跳跳棋

    P1852 [国家集训队]跳跳棋 lca+二分 详细解析见题解 对于每组跳棋,我们可以用一个三元组(x,y,z)表示 我们发现,这个三元组的转移具有唯一性,收束性 也就是说,把每个三元组当成点,以转移 ...

  2. Github使用教程（二）------ Github客户端使用方法

    在上一篇教程中,我们简单介绍了Github网站的各个部分,相信大家对Github网站也有了一个初步的了解(/(ㄒoㄒ)/~~可是还是不会用怎么办),不要着急,我们今天先讲解一下Github for w ...

  3. React 回忆录（一）为什么使用 React？

    Hi 各位,欢迎来到 React 回忆录!

  4. ArrayList初始化的4种方法

    In the last post we discussed about class ArrayList in Javaand it’s important methods. Here we are s ...

  5. centos6搭建redis集群搭建（单机多节点）

    一.安装redis 1.安装gcc环境 yum install gcc-c++ 2.下载源码包并解压 wget http://download.redis.io/releases/redis-3.2. ...

  6. 批量启动application pool

    在powershell中执行 Get-ChildItem IIS:\AppPools | where {$_.state -eq "Stopped"} | Start-WebApp ...

  7. 【第三十章】 elk（1） - 第一种架构（最简架构）

    软件版本: es:2.4.0 logstash:2.4.0 kibana:4.6.1 一.logstash安装(收集.过滤日志.构建索引) 1.下载:https://www.elastic.co/do ...

  8. Unity 之 Time

    Time.deltaTime  指完成每一帧的时间,根据得到实际的测试,可以看到每一帧的所用时间不一致,差距很微小. Time.deltaTime在Update和FixedUpdate中显示的是不一样 ...

  9. javaweb项目运行时生成的Servers项目作用

    在javaweb项目中,看到有一个Servers的项目,发现每新增一个项目,就会在Servers项目中新生成一些对应的项目文件. 如图所示: 每个项目都有对应的文件.文件的结构图如下: 解释一:Ser ...

  10. UVa 1660 电视网络（点连通度+最小割最大流+Dinic）

    https://vjudge.net/problem/UVA-1660 题意:给出一个无向图,求出点连通度.即最少删除多少个点,使得图不连通. 思路: 如果求线连通度的话,直接求个最大流就可以了.但这 ...