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. json_encode 中文 null

    今天使用json_encode 结果中文变成了null 原来是编码的问题. 将编码由 GBK 转成utf-8的就可以了 iconv('gb2312','utf-8', '中文');

  2. Java-Runoob-高级教程-实例-数组:04. Java 实例 – 数组反转

    ylbtech-Java-Runoob-高级教程-实例-数组:04. Java 实例 – 数组反转 1.返回顶部 1. Java 实例 - 数组反转  Java 实例 以下实例中我们使用 Collec ...

  3. CentOS下Apache默认安装路径

    apache:如果采用RPM包安装,安装路径应在 /etc/httpd目录下apache配置文件:/etc/httpd/conf/httpd.confApache模块路径:/usr/sbin/apac ...

  4. mysql导入导出数据中文乱码解决方法小结(1、navicat导入问题已解决,创建连接后修改连接属性,选择高级->将使用Mysql字符集复选框去掉,下拉框选择GBK->导入sql文件OK;2、phpmyadmin显示乱码的问题也解决,两步:1.将sql文件以utf8的字符集编码另存,2.将文件中sql语句中的字段字符集编码改成utf8,导入OK)

    当向 MySQL 数据库插入一条带有中文的数据形如 insert into employee values(null,'张三','female','1995-10-08','2015-11-12',' ...

  5. WCF服务部署

    一.将WCF服务部署到IIS上 1.首先检测电脑上是否安装了IIS,一般来说Win7以上系统自带IIS 2.下面进行IIS服务的开启设置 控制面板=>打开或关闭Windos功能 3.勾选该窗口中 ...

  6. laravel 5.3 ——路由(资源,别名)

    laravel的路由定义中,其中route:resoure(),可以直接定义类似restful风格的URL 例如:Route::resource('system/role','System\RoleC ...

  7. java 执行shell命令

    Runtime.getRuntime().exec http://blog.csdn.net/heyetina/article/details/6555746

  8. ORM创建 脚本运行

  9. msq_table's methods2

    -- 删除数据 自增长id被占用 -- 清楚所有数据并重置id 1 truncate table name; -- 主键(唯一) id int primary key; -- 主键内容不能重复,不能为 ...

  10. UVA-575-水题-模拟

    题意: 按照这个公式模拟 10120skew = 1×(25 −1)+0×(24 −1)+1×(23 −1)+2×(22 −1)+0×(21 −1) = 31+0+7+6+0 = 44. #inclu ...