html5 canvas 显示文字居中,html5 canvas 文字居中对齐
> web前端 > HTML 5 > 正文
html5 canvas 文字居中对齐
2013-07-09
我要投稿
[color=eight:25px]html部门
[color=eight:25px]
[color=eight:25px]css部门
[color=eight:25px]canvas{width:1000px;height:700px;}
[color=eight:25px]js部门
初初的根本格局:
[color=eight:25px]window.οnlοad=function(){var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
//前面书写画绘号令
context.beginPath();//开端画绘的声明
context.moveTo(x,y);//界说出发点,能够理解为将绘笔挪动迪苹个位置
context.lineTo(x,y);//界说一个起点
context.lineWidth=5;//界说线条宽度
context.strokeStyle='blue';//界说线条颜色
context.lineCap='round';//界说线帽(露圆角、尖角、斜角)
context.stroke();//给线条上色,即停止画造
}
//正在此先举一个绘线的小例子
效果图:
[color=eight:25px]
代码以下:
< html>
< head>
< meta charset=utf-8 />
< title>canvas绘线
< /head>
< body>
< /body>
< script type="text/JAVAscript">
var can=document.getElementById('test');
var draw=can.getContext('2d');
draw.beginPath();
draw.moveTo(50,100);
draw.lineTo(300,100);
draw.lineWidth=50;
draw.strokeStyle='#0f0';
draw.lineCap='round';
draw.stroke();
< /script>
< /html>尔后的代码只交换beginPath()后的内容
接下去,再引见寂?属性
context.font="文字特殊款式 字体巨细 字体"//此中文字特殊款式可选,假如没有挖写,默许为normal,借可使用italic暗示斜体等等
context.fillStyle='#f00';//文字颜色
context.strokeText('利用canvas创立的文字——有边框',x,y);//创立文字,控造文件的肇端位置
context.fillText('利用canvas创立的文字——有添补',x,y);//创立文字,控造文件的肇端位置
context.textAlign='center';//文本程度对齐方法
context.textBaseline='middle';//文本垂曲标的目的,基线位置
[color=eight:25px]
[color=eight:25px]举个例子。先看效果
[color=eight:25px]
代码:
draw.font="normal 30px arial"
draw.fillStyle='#00f';
draw.fillText('利用canvas创立的文字——有添补',50,50);
draw.font="italic 40px arial"
draw.strokeStyle='#f00';
draw.strokeText('利用canvas创立的文字——无添补',50,120);
接下去再用程度对齐,基线对齐两个属性,吭哟效果
[color=eight:25px]1)对上面的'利用canvas创立的文字——无添补'加减:程度居中对齐
[color=eight:25px]
draw.strokeStyle='#f00';
draw.textAlign='center';//加减的一止代码
draw.strokeText('利用canvas创立的文字——无添补',50,120);
效果以下:
[color=eight:25px]
假如改成draw.textAlign='right',则效果以下
可睹,所谓的left、right、center指的是定位参考面的位置
right暗示,以整段文字的最左侧做为定位面,然后那个面的位置位于上里所界说的120px(横背)位置
那里很容易弄治,请留意!
最初再引见一个属性,获与天生的文本的少度
draw.measureText(文本或变量名称)
举个例子
代码以下:
var can=document.getElementById('test');
var draw=can.getContext('2d');
var text='利用canvas创立的文字——有添补'
draw.beginPath();
draw.font="normal 30px arial"
draw.fillStyle='#00f';
draw.fillText(text,50,50);
var a=draw.measureText(text);
var width=a.width;
draw.font="normal 30px arial"
draw.fillStyle='#f00';
draw.fillText('文字少度为'+width+'px',50,100);假使我改动width=a.width的位置
[color=eight:25px]会发生别的的效果(那是代码的从上到下剖析所酿成的)
[color=eight:25px]代码以下:
[color=eight:25px]
var can=document.getElementById('test'); var draw=can.getContext('2d'); var text='利用canvas创立的文字——有添补'; var a=draw.measureText(text); var width=a.width; draw.beginPath(); draw.font="normal 30px arial" draw.fillStyle='#00f'; draw.fillText(text,50,50); draw.font="normal 30px arial" draw.fillStyle='#f00'; draw.fillText('文字少度为'+width+'px',50,100); 效果如图:
[color=eight:25px]
点击复制链接 与好友分享!回本站首页
相关TAG标签
文字
上一篇:HTML5 Canvas渐进填充与透明
下一篇:写个一个简单的canvas图表
相关文章
Sencha toucha2中设置文本框默认提示
HTML5/CSS3(PrefixFree.js) 3D文字特效
HTML5绘图之文字旋转
HTML5:标记文字
canvas 三 图片插入及文字填充
图文推荐
html5 canvas 显示文字居中,html5 canvas 文字居中对齐相关推荐
- html5在线显示不出来,html5 drawImage 不显示问题
下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. Your browser does not support the canvas elem ...
- html5 canvas 显示文字,如何使用HTML5canvas绘制文字
如果要使用HTML5 Canvas绘制文字,那么需要使用到画布上下文的fillText()方法.下面我们来看具体的内容. 我们先来看具体的示例 function draw() { var canvas ...
- html画布显示PPT,【Web前端问题】有没有办法让HTML5 canvas显示/预览word/excel/powerpoint 文档?...
目前想实现类似百度文库那样的在线文档预览,但是他们使用的一般都是Flash,而HTML5 canvas可以在大多数情况下代替Flash,那么有没有办法让canvas显示/预览Office文档? 如果不 ...
- canvas文字居中;canvas画布文字右对齐;canvas画布文字左对齐;canvas文字自动换行;canvas设置行间距;
canvas参考手册 场景:画布绘制文本,使用 context.fillText(text,x,y,maxWidth).文本对其也就是设置xy坐标问题. 以下的画布设定宽度假设都是width:500 ...
- HTML5 学习总结(四)——canvas绘图、WebGL、SVG
目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...
- html5引入的新标签canvas,HTML页面中添加Canvas标签示例
怎样在html5中添加canvas标签 标签是 HTML 5 中的新标签. 定义和用法 标签定义图形,比如图表和其他图像. 标签只是图形容器,您必须使用脚本来绘制图形. 实例 通过 canvas 元素 ...
- html中图片链接生成文字,利用HTML5使文字转图片【长微博生成器】
RT,实现类似现在网上流行的长微博生成器,就是把长文字转成图片.当然功能比不上网上流传的,不知道网上那些用的什么方法.我这是用的HTML5的Canvas特性,也算一种实现吧. 示例地址: TextTo ...
- HTML5 基础知识,第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值,Canvas 提供的创造性,以及Web storage的离线应用
HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...
- html5画图论文结束语,基于HTML5 Canvas的画图板的设计与实现.doc
单片机论文_优秀毕业论文_毕业论文设计_毕业过关论文_毕业设计_毕业设计说明_毕业论文_单片机毕业论文_基于单片机毕业论文_毕业论文终稿_毕业论文初稿_毕业论文设计_单片机论文_本文档支持完整下载,支 ...
最新文章
- 第三届全国县域经济基本竞争力百强县(市)
- d3 i5 神舟精盾k480n_神舟精盾k480n i5 d3和精盾i5 d1哪个好?
- dynamic与var
- php mysql注册登录界面_php实现登录注册界面
- Exchange2003启用web页面登陆(表单型身份验证)
- python爬虫反爬-python爬虫--爬虫与反爬
- python爬虫爬取微信公众号的阅读数、喜爱数、文章标题和链接等信息
- 如何下载电驴网站Verycd上的资源
- oracle里round函数补0,Oracle的Round函数
- 【小学生打字练习软件】_在线网上打字比赛软件系统
- 关于Fusion on Apple Silicon的谨慎猜测
- 好用的需求文档管理工具Telelogic DOORS
- 利用 ARCHPR 暴力破解 压缩包解压密码
- Adobe photoshop cc 2020,PS 2020问世啦!
- dnf 服务器维护时间表2015年,DNF2015年6月18日更新维护结束时间及内容介绍
- java中加解密合集
- POJ 2092 Grandpa is Famous G++
- AVOD——Aggregate View Object Detection代码在centos服务器上运行过程
- 问道手游服务器维护,《问道》手游服务器例行维护公告(2016.03.07)
- 银行异地取钱扣费-中行太坑了!!!