<!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. ELK+Kafka学习笔记之搭建ELK+Kafka日志收集系统集群

    0x00 概述 关于如何搭建ELK部分,请参考这篇文章,https://www.cnblogs.com/JetpropelledSnake/p/9893566.html. 该篇用户为非root,使用用 ...

  2. Python3 实现（wxpy）用微信自动定时给朋友定时推广

    Python3 实现(wxpy)用微信自动定时给朋友定时推广 安装wxpy 安装微信机器人wxpy非常简单,如果你拥有pip,请直接按照Github中的方法安装: pip install wxpy 实 ...

  3. Linux LNMP架构搭建

    一.搭建LNMP基本架构 1.L(http) N(nginx) M(mysql) P(php) 2.安装顺序 Mysql-->PHP-->Nginx 3.安装包 Discuz_3. htt ...

  4. bzoj 2038 A-小Z的袜子[hose] - 莫队算法

    作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命…… 具体来说,小Z把这N只袜子从1到N编号,然后从 ...

  5. Linux查看网卡带宽的两个命令

    1.ethtool ethtool 网络接口名 #ethtool em4 Settings for em4: Supported ports: [ TP ] Supported link modes: ...

  6. RS（纠删码）技术浅析及Python实现

    前言 在Ceph和RAID存储领域,RS纠删码扮演着重要的角色,纠删码是经典的时间换空间的案例,通过更多的CPU计算,降低低频存储数据的存储空间占用. 纠删码原理 纠删码基于范德蒙德矩阵实现,核心公式 ...

  7. Unity 之 图片显示的真实大小

    图片放入Unity中自身的属性 在做帽子游戏的时候,看到这么一段代码 //获取保龄球的自身宽度 float ballWidth=ball.GetComponent<Renderer>(). ...

  8. xshell5 Linux 上传下载文件

    1,先登录身份验证和文件传输ZMODEM 选择自动激活. 2,rpm -qa | grep lrzsz 利用此命令查看是否安装了lrzsz . 如果没有任何反应则是没有安装 若没有安装 yum ins ...

  9. Java初始化块的作用

    1.使代码更简洁 eg: public class Test { private void init() { System.out.println("初始化状态"); } publ ...

  10. TensorFlow上实践基于自编码的One Class Learning

    “我不知道什么是爱,但我知道什么是不爱” --One Class Learning的自白 一.单分类简介 如果将分类算法进行划分,根据类别个数的不同可以分为单分类.二分类.多分类,常见的分类算法主要解 ...