<!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. MySQL Crash Course #11# Chapter 20. Updating and Deleting Data

    INDEX Updating Data The IGNORE Keyword Deleting Data Faster Deletes Guidelines for Updating and Dele ...

  2. 20145331魏澍琛《网络对抗》逆向及Bof基础

    20145331魏澍琛<网络对抗>逆向及Bof基础 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任 ...

  3. 用GDB调试Segmentation 段错误【转】

    本文转载自:http://blog.csdn.net/learnhard/article/details/4879834 调试Linux程序的时候,出现Segmentation Fault是最郁闷的事 ...

  4. Oracle SQL Developer 中配置JDBC驱动程序连接

    此博客仅作为自己备忘,没有丝毫技术含量.把Postgres的JDBC驱动程序放在Oracle SQL Developer的JDBC的文件夹下,然后安装Oracle SQL Developer,添加新连 ...

  5. thymeleaf和easyui配合可能出现的错误

    thymeleaf和easyui 在easyui的内页,不再使用th:href引入静态资源文件. 在easyui页面中,script执行easyui自己的方法要加入: <script th:in ...

  6. Java名称由来

              2000年度的JavaOne国际会议大厅热闹非凡,一阵阵浓郁的咖啡味儿香气扑鼻.从世界各地汇集到旧金山参加会议的Java精英们兴奋异常,排着长队,等待得到一杯由Java语言控制的咖 ...

  7. 解决方案：c调用python，PyImport_Import或者PyImport_ImportModule总是返回为空

    下面c_python_utils.h是处理工具函数,test.cpp是测试程序,hello.py是python类 可是当我集成到项目中的时候,PyImport_Import总是返回为空,起初我以为是i ...

  8. Codeforces Beta Round #17 A.素数相关

    A. Noldbach problem Nick is interested in prime numbers. Once he read about Goldbach problem. It sta ...

  9. html js 捕捉鼠标右键事件，按下滚轮事件，左键点击事件

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

  10. linux 系统调用号表

    位于 /usr/include/asm/unistd.h 由于我是64位系统,所以有一些额外的东西.我的这个文件为下文 #ifndef _ASM_X86_UNISTD_H #define _ASM_X ...