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. jquery select radio

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为S ...

  2. php安装ZendGuardLoader扩展问题

     1,安装ZendGuardLoader:wget http://downloads.zend.com/guard/6.0.0/ZendGuardLoader-70429-PHP-5.4-linux- ...

  3. Logstash之二:原理

    一.Logstash 介绍 Logstash 是一款强大的数据处理工具,它可以实现数据传输,格式处理,格式化输出,还有强大的插件功能,常用于日志处理. 二.工作流程 Logstash 工作的三个阶段: ...

  4. poj 3069 Saruman's Army(贪心)

    Saruman's Army Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) Tot ...

  5. 1077 Kuchiguse (20 分)

    1077 Kuchiguse (20 分) The Japanese language is notorious for its sentence ending particles. Personal ...

  6. 小朋友学C++(1)

    Hello World! 在学C++之前,最好先学习一下C语言 让我们先运行一段简单的代码,编译器可以使用 在线C++编译器 或 Xcode(苹果系统) 或Dev C++(Windows系统). #i ...

  7. 如何对hashmap按value值排序

    http://bbs.csdn.net/topics/90321713 这个帖子中没有我想要的答案,treemap是根据key排序的,想以value排序,那么可以key,value互换一下,不过这样的 ...

  8. 编写一个函数,在页面上输出一个N行M列的表格,表格内容填充0~100的随机数字

    function print(n,m){     document.write("<table>");     for(var i=0; i<n; i++){   ...

  9. js中的数组操作

    <!DOCTYPE HTML> <html > <head> <meta http-equiv="Content-Type" conten ...

  10. 9.求背景图片左边到#box盒子左边外框侧的距离

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