MyException - 我的异常网
当前位置:我的异常网» Web前端 » canvas作图文本

canvas作图文本

www.MyException.Cn  网友分享于:2013-12-30  浏览:0次
canvas绘制文本

在HTML5中,我们还可以在Canvas「画布」上绘制我们所需的文本文字,其中所涉及到的CanvasRenderingContext2D对象的主要属性和方法如下:

属性或方法 基本描述
font 设置绘制文字所使用的字体,例如20px 宋体,默认值为10px sans-serif。该属性的用法与css font属性一致,例如italic bold 14px/30px Arial,宋体
fillStyle 用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
fillText(string text, int x, int y[, int maxWidth]) 从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的,如果文本内容宽度超过该参数设置,则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle
strokeText(string text, int x, int y[, int maxWidth]) 从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的,如果文本内容宽度超过该参数设置,则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致,不过strokeText()绘制的文字内部是非填充(空心)的,fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle

从上面的API描述信息中我们可以得知,在Canvas中可以使用两种方式来绘制文本文字:一种是使用fillText()+fillStyle来绘制填充(实心)的文字;一种是使用strokeText()+strokeStyle绘制非填充(空心)的文字。

下面,我们先来看看如何使用canvas绘制实心文字,具体html代码如下:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制文本文字入门示例</title>
</head>
<body>

<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>

<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){  
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");
    
    //设置字体样式
    ctx.font = "30px Courier New";
    //设置字体填充颜色
    ctx.fillStyle = "blue";
    //从坐标点(50,50)开始绘制文字
    ctx.fillText("CodePlayer+中文测试", 50, 50);
}
</script>
</body>
</html>

 

对应的显示效果如下

使用canvas绘制的蓝色实心文字效果使用canvas绘制的蓝色实心文字效果

接着,我们使其他环境条件均保持不变,再次使用strokeText()+strokeStyle方式来绘制上述示例中的文字,对应的JavaScript代码如下:

 

<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){  
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");
    
    //设置字体样式
    ctx.font = "30px Courier New";
    //设置字体颜色
    ctx.strokeStyle = "blue";
    //从坐标点(50,50)开始绘制文字
    ctx.strokeText("CodePlayer+中文测试", 50, 50);
}
</script>

 

我们再次使用浏览器访问页面,将会看到如下显示效果(效果图片中的"CodePlayer"字样其实也是空心的,只是由于字体较小导致两侧看起来重叠在了一起):

使用canvas绘制的蓝色空心文字效果使用canvas绘制的蓝色空心文字效果

 

 

 

拓展:

①HTML5画布文字垂直对齐

在HTML5画布中我们使用textBaseline属性来设置对齐方式,对应值如下:

  • top
  • bottom
  • middle
  • hanging(挂)
  • alphabetic(拼音)
  • ideographic

如果你没有设置此属性,默认为:alphabetic

 

②HTML5画布获取文字度量

在HTML5画布中,使用measureText方法来获取文字的相关度量信息对象,其中包含一个属性,即文字宽度。

基于文字的大小和字体,它可以提供一个准确的文字宽度。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>画布获取文字度量</title>
</head>
<body>

<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="gbcanvas" width="550" height="300"></canvas>

<script type="text/javascript">
    /*Javascript源代码*/
    var canvas = document.getElementById('gbcanvas'), // 这里通过gbCanvas获取canvas对象
            context = canvas.getContext('2d'); //这里通过canvas获取处理API的上下文context

    var x = canvas.width/2, y = canvas.height/2 -10;
    var text = '你好,gbtags.com';

    context.font = 'bold 30pt "microsoft yahei"';
    context.textAlign = 'center';
    context.fillStyle = 'red';
    context.fillText( text, x, y);

    //以下代码获取上面定义text的相关metrics信息

    var metrics = context.measureText(text);
    var width = metrics.width;

    context.font = '15pt Arial';
    context.textAlign = 'center';
    context.fillStyle = '#888888';
    context.fillText('-' + width + 'px-', x, y +45);
</script>
</body>
</html>
 

 ③HTML5画布实现文字折行效果

HTML5画布中,如果需要文字折行效果,需要我们自己书写相关逻辑实现,这里我们可以利用到前面介绍的 measureTex()方法来计算当前文字的宽度,并且和当前能够显示的宽度做比对

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 CanvasPattern实现图像平铺的入门示例</title>
</head>
<body>

<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="gbcanvas" width="550" height="3020"></canvas>

<script type="text/javascript">
    var canvas = document.getElementById('gbcanvas'),
            context = canvas.getContext('2d');
    var maxWidth = 500, lineHeight = 30, x = (canvas.width -maxWidth)/2, y = 60
    text = '极客所定义一个处理文字折行的方法,使用前面我们介绍,有文字保存到数组';
    context.font = 'bold 20pt "microsoft yahei"';
    context.fillStyle = '#DD4814';
    wrapText(context, text, x, y, maxWidth, lineHeight);


    /*
     * 定义一个处理文字折行的方法,使用前面我们介绍的meaureText方法
     */

    function wrapText(context, text, x, y, maxWidth, lineHeight){

        var words = text.split(''); //这里我们将所有文字保存到数组中,注意如果处理英文,请使用split(' ');
        var line = '';

        for(var n = 0; n<words.length; n++){
            var testLine = line + words[n];
            var metrics = context.measureText(testLine); //使用measureText计算宽度
            var testWidth  = metrics.width;
            if(testWidth > maxWidth && n>0){ //此处判断文字宽度是否超过可显示最大宽度
                context.fillText(line, x, y);
                line = words[n];
//                console.log(line)
                y += lineHeight; //此处设置添加文字到下一行的位置

            }else{
                line = testLine;
            }
        }

        context.fillText(line, x, y);

    }

</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

.

文章评论

旅行,写作,编程
旅行,写作,编程
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
 程序员的样子
程序员的样子
老程序员的下场
老程序员的下场
如何成为一名黑客
如何成为一名黑客
中美印日四国程序员比较
中美印日四国程序员比较
那些争议最大的编程观点
那些争议最大的编程观点
程序员都该阅读的书
程序员都该阅读的书
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
漫画:程序员的工作
漫画:程序员的工作
鲜为人知的编程真相
鲜为人知的编程真相
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
总结2014中国互联网十大段子
总结2014中国互联网十大段子
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
程序员的鄙视链
程序员的鄙视链
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员和编码员之间的区别
程序员和编码员之间的区别
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
代码女神横空出世
代码女神横空出世
编程语言是女人
编程语言是女人
为什么程序员都是夜猫子
为什么程序员都是夜猫子
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
Java程序员必看电影
Java程序员必看电影
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
我是如何打败拖延症的
我是如何打败拖延症的
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员应该关注的一些事儿
程序员应该关注的一些事儿
10个调试和排错的小建议
10个调试和排错的小建议
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
我的丈夫是个程序员
我的丈夫是个程序员
程序员必看的十大电影
程序员必看的十大电影
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有