demo1 fillText strokeText绘制文字

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title> fillText strokeText</title>
  6. </head>
  7. <body>
  8.  
  9. <canvas id="wapper" width="500" height="500"></canvas>
  10.  
  11. <script>
  12. 	var wapper = document.getElementById('wapper'),
  13. 		_2d = wapper.getContext('2d');/*2d的绘制对象*/
  14.  
  15. 	_2d.font='30px Arial';
  16. 	_2d.fillText('dtdxrk',50,50);/*fillText(text,x,y,max width)*/
  17. 	_2d.strokeText('dtdxrk',50,100);/*strokeText(text,x,y,max width)*/
  18.  
  19. </script>
  20. </body>
  21. </html>

　　

demo2 字体 大小 粗细

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>字体 大小 粗细</title>
  6. </head>
  7. <body>
  8.  
  9. <canvas id="wapper" width="500" height="500"></canvas>
  10.  
  11. <script>
  12. 	var wapper = document.getElementById('wapper'),
  13. 		_2d = wapper.getContext('2d');/*2d的绘制对象*/
  14.  
  15. 	_2d.font='30px Arial';
  16. 	_2d.fillText('dtdxrk',10,30);/*fillText(text,x,y,max width)*/
  17.  
  18. 	_2d.font='italic 40px simsun';
  19. 	_2d.fillText('dtdxrk',10,100);/*fillText(text,x,y,max width)*/
  20.  
  21. 	_2d.font='bold 22px simsun';
  22. 	_2d.fillText('dtdxrk',10,150);/*fillText(text,x,y,max width)*/
  23. </script>
  24. </body>
  25. </html>

　　

demo3 文字对齐 textAlign textBaseline

感觉没啥好说的

http://www.w3school.com.cn/tags/canvas_textalign.asp

  1. _2d.textAlign="center|end|left|right|start";

　　

http://www.w3school.com.cn/tags/canvas_textbaseline.asp

  1. _2d.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

　　

【canvas】基础练习二 文字的更多相关文章

  1. canvas API ，通俗的canvas基础知识（一）

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  2. canvas 基础知识整理（二）

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  3. canvas基础简单易懂教程（完结，多图）

    目录 Canvas学习 一. Canvas概述 1.1 Hello world 1.2 Canvas的像素化 1.3 Canvas的动画思想 1.4 面向对象思维实现canvas动画 二.Canvas ...

  4. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  5. canvas基础之旅

    canvas 主要使用2D rendering context  API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...

  6. canvas 基础知识整理（一）

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

  7. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  8. canvas 基础知识

    canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...

  9. java 基础知识二 基本类型与运算符

    java  基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...

随机推荐

  1. smarty循环

    1. 功能说明,在页面使用smarty循环100次输出,类似for循环100次{section name=total loop=100}{$smarty.section.total.index+1} ...

  2. Optimizing concurrent accesses in a directory-based coherency protocol

    In one embodiment, the present invention includes a directory to aid in maintaining control of a cac ...

  3. CUDA中block和thread的合理划分配置

    CUDA并行编程的基本思路是把一个很大的任务划分成N个简单重复的操作,创建N个线程分别执行执行,每个网格(Grid)可以最多创建65535个线程块,每个线程块(Block)一般最多可以创建512个并行 ...

  4. Android--常用框架大全

    1. 缓存 名称 描述 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 名称 描述 Android Universal Image Loader 一个强大的加载,缓存,展示图 ...

  5. 关于QWidget和QDialog窗体居中的问题（必须要setFixedSize设初始值大小，否则没法居中）

    最近开发中,遇到了窗体不能居中的问题,看了网上的很多文章,窗口居中,无非都是move至窗口的中心目标; 有两种方式, 一种在构造函数中直接计算中心坐标; 另一种是在窗口show后再move至相应坐标. ...

  6. string操作

    常用的功能测试: #! -*- coding:utf-8 -*- import string s = 'Yes! This is a string' print '原字符串:' + s print ' ...

  7. Leetcode 104 Maximum Depth of Binary Tree 二叉树

    计算二叉树的最大深度 我的方法是找出两个子树的长度中最长的那个,然后加1 class Solution { public: int maxDepth(TreeNode* root) { ; ,maxD ...

  8. python 教程 第十九章、 图形界面编程

    第十九章. 图形界面编程 import Tkinter top = Tkinter.Tk() hello = Tkinter.Label(top, text='Hello World!') hello ...

  9. React学习（3）——ref，key，PureComponent，bindActionCreator

    ref 如果在html里设置ref那么它就指向这个真实的DOM节点. 如果在组件里设置ref,那么它就指向这个组件实例的引用,和组件里面的this互等. 我们经常在表单input,select里使用, ...

  10. springboot 配置拦截器

    1 有这样一个需求 服务端对部分请求URL需要验证身份.如果验证错误,停止请求,按照既定的数据格式返回:如果验证正确,继续执行请求. 2 需要这样做 1. 将指定格式的请求拦截下来: 2. 获取参数, ...