1:html

<div style="margin:0 auto;width:794px;height:1123px">
<canvas id="myCanvas" width="794" height="1123" style="border:1px solid #c3c3c3;background:url(img/ruhuotongzhi1.jpg)">
Your browser does not support the canvas element.
</canvas>
</div>

  2:js

 var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
var json = { "name": [{ "a": "李四" }] }
//alert(json.name[0].a);
context.fillStyle ='black';//字体颜色
context.font = '20px sans-serif';//字体样式
context.fillText(json.name[0].a, 105, 206);//位置
context.fillText(json.name[0].a, 509, 208);
context.fillText(json.name[0].a, 80, 246);
context.fillText(json.name[0].a, 550, 246);

  

HTML5 画图--文字的更多相关文章

  1. HTML5火焰文字特效DEMO演示

    效果展示:http://hovertree.com/texiao/html5/26/ 效果图: 扫描二维码查看效果:

  2. HTML5火焰文字特效DEMO演示---转载

    只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  3. Android之自定义画图文字动画

    结构: BaseView: package com.caiduping.canvas; import android.content.Context; import android.graphics. ...

  4. [读码]HTML5像素文字爆炸重组

    [边读码,边学习,技术也好,思路也罢] [一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看 ...

  5. 基于HTML5自定义文字背景生成QQ签名档

    分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片 ...

  6. HTML5 <Canvas>文字粒子化

    文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  7. HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  8. HTML5 Canvas ( 文字的度量 ) measureText

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. HTML5 Canvas ( 文字横纵对齐 ) textAlign, textBaseLine

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Windows 客户端时间更新脚本NTP

    Windows XP 客户端时间更新脚本NTP ::Windows XP 客户端时间更新脚本NTP reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsof ...

  2. TroubleShoot: Fail to deploy Windows UAP to device: 0x80073CFD

    After creating "Blank App(Windows Universal)" targeting Windows Phone 10 in Visual Studio ...

  3. 【Oracle学习笔记-1】Win7下安装Oracle 10g

    源程序获取 从Oracle的官网上下载Oracle 10g: 10203_vista_w2k8_x86_production_db.zip:==>服务器(必须) 10203_vista_w2k8 ...

  4. springMVC学习(2)

    一.使用注解的处理器映射器和适配器 1) 在这个下面的/org/springframework/web/servlet/DispatcherServlet.properties文件,从这个文件中加载处 ...

  5. H3C的DHCP中继配置命令

    dhcp enable命令用来使能DHCP服务 dhcp relay information enable 命令用来配置DHCP中继支持Option 82功能 缺省情况下,DHCP中继不支持Optio ...

  6. php session保存到memcache或者memcached中

    本教程叫你如何将php 的session存储在 memcached中,参考了好多网页,发现错误百出,最后自己还是测试成功了,现在将结果结果分享. 1-)系统环境 : elastix2.4 (cento ...

  7. centos自带的dvd中的官方base源,丢失了可以复制下面的内容

    /etc/yum.repos.d/CentOS-Base.repo文件中的内容,同样适用于centos6 [base]name=CentOS-$releasever - Basemirrorlist= ...

  8. 如何分析 WindowsDump:Dump 起源与初始设置

    https://www.qcloud.com/community/article/511817 转者注:让我感觉以前看蓝屏都白看了~~~原来蓝屏也可以分析具体原因. 适用场景:Windows 系列系统 ...

  9. 并发基础(九) java线程的终止与中断

    1.简单了解一下:为何不赞成使用 Thread.stop.Thread.suspend 和 Thread.resume?   suspend .resume.stop方法分别完成了线程的暂停.恢复.终 ...

  10. SQL函数汇总(MySQL教材)

    1.SQL重复记录查询的几种方法 https://www.cnblogs.com/firstdream/p/5826238.html 2.SQL两列字段,合并为一个字符串,中间加符号 https:// ...