<!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. C# 将 Stream 写入文件

    public void StreamToFile(Stream stream,string fileName) { // 把 Stream 转换成 byte[] byte[] bytes = new ...

  2. Git项目创建与提交

    创建Git密钥: 1.生成密钥: 右键–>Git Bash Here:先输入ssh-keygen –t rsa –C "邮箱地址",注意ssh-keygen之间是没有空格的, ...

  3. linux下安装/升级openssl

    (2810)  (1) 安装环境: 操作系统:CentOs7 OpenSSL Version:openssl-1.0.2j.tar.gz 安装: 目前版本最新的SSL地址为 http://www.op ...

  4. 【Map】Echarts之iphone销量地图的使用以及详细配置

    1.引入echarts库文件 <script charset="utf-8" type="text/javascript" language=" ...

  5. 【第四章】 springboot + swagger

    注:本文参考自 http://www.jianshu.com/p/0465a2b837d2 swagger用于定义API文档. 好处: 前后端分离开发 API文档非常明确 测试的时候不需要再使用URL ...

  6. 论文笔记——MobileNets(Efficient Convolutional Neural Networks for Mobile Vision Applications)

    论文地址:MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications MobileNet由Go ...

  7. 软件测试&安全测试高峰论坛

    Nubia测试以及介绍 基于Cucumber的自动化测试平台 常见Web漏洞之XSS,主要HTML与JS基础.XSS的基础知识与挖掘方法.XSS的利用 自动化测试框架以及测试思路

  8. python 集合从头部删除元素

    num_set = , , , , ]) num_set.pop() print(num_set) num_set.pop() print(num_set)

  9. EsayUI + MVC + ADO.NET(工作单元)

    关联的设计 关联本身不是一个模式,但它在领域建模的过程中非常重要,所以需要在探讨各种模式之前,先讨论一下对象之间的关联该如何设计.我觉得对象的关联的设计可以遵循如下的一些原则: 关联尽量少,对象之间的 ...

  10. Codeforces 38B - Chess

    38B - Chess 思路:懂点象棋的规则就可以,看看哪些点可以放马. 代码: #include<bits/stdc++.h> using namespace std; #define ...