HTML5 Canvas实现文本对齐的代码总结-Tutorial H5-php.cn

Rumah

hujung hadapan web

Tutorial H5

HTML5 Canvas实现文本对齐的代码总结

Mar 14, 2017 pm 04:00 PM

canvas html5 penjajaran teks

这篇文章主要介绍了HTML5 Canvas实现文本对齐的方法总结,包括使用水平对齐的context.textAlign与垂直对齐的context.textBaseline两种方式及各种参数,需要的朋友可以参考下

水平对齐textAlign

context.textAlign=&quot;center|end|left|right|start&quot;;

Salin selepas log masuk

其中各值及意义如下表。

值	描述
start	默认。文本在指定的位置开始。
end	文本在指定的位置结束。
center	文本的中心被放置在指定的位置。
left	文本左对齐，
right	文本右对齐。

我们通过一个例子来直观的感受一下。

&lt;!DOCTYPE html&gt;   
&lt;html lang=&quot;zh&quot;&gt;   
&lt;head&gt;   
    &lt;meta charset=&quot;UTF-8&quot;&gt;   
    &lt;title&gt;textAlign&lt;/title&gt;   
    &lt;style&gt;   
        body { background: url(&quot;./images/bg3.jpg&quot;) repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    &lt;/style&gt;   
&lt;/head&gt;   
&lt;body&gt;   
&lt;p id=&quot;canvas-warp&quot;&gt;   
    &lt;canvas id=&quot;canvas&quot;&gt;   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    &lt;/canvas&gt;   
&lt;/p&gt;   
  
&lt;script&gt;   
    window.onload = function(){   
        var canvas = document.getElementById(&quot;canvas&quot;);   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext(&quot;2d&quot;);   
        context.fillStyle = &quot;#FFF&quot;;   
        context.fillRect(0,0,800,600);   
  
        // 在位置 400 创建蓝线   
        context.strokeStyle=&quot;blue&quot;;   
        context.moveTo(400,100);   
        context.lineTo(400,500);   
        context.stroke();   
  
  
        context.fillStyle = &quot;#000&quot;;   
        context.font=&quot;50px Arial&quot;;   
  
        // 显示不同的 textAlign 值   
        context.textAlign=&quot;start&quot;;   
        context.fillText(&quot;textAlign=start&quot;, 400, 120);   
        context.textAlign=&quot;end&quot;;   
        context.fillText(&quot;textAlign=end&quot;, 400, 200);   
        context.textAlign=&quot;left&quot;;   
        context.fillText(&quot;textAlign=left&quot;, 400, 280);   
        context.textAlign=&quot;center&quot;;   
        context.fillText(&quot;textAlign=center&quot;, 400, 360);   
        context.textAlign=&quot;right&quot;;   
        context.fillText(&quot;textAlign=right&quot;, 400, 480);   
    };   
&lt;/script&gt;   
&lt;/body&gt;   
&lt;/html&gt;

Salin selepas log masuk

运行结果：
HTML5 Canvas实现文本对齐的代码总结

垂直对齐textBaseline

context.textBaseline=&quot;alphabetic|top|hanging|middle|ideographic|bottom&quot;;

Salin selepas log masuk

其中各值及意义如下表。

值	描述
alphabetic	默认。文本基线是普通的字母基线。
top	文本基线是em方框的顶端。
hanging	文本基线是悬挂基线。
middle	文本基线是em方框的正中。
ideographic	文本基线是表意基线。
bottom	文本基线是em方框的底端。

首先咱们通过一个图来看一下各个基线代表的位置。
HTML5 Canvas实现文本对齐的代码总结

我们通过一个例子来直观的感受一下。

&lt;!DOCTYPE html&gt;   
&lt;html lang=&quot;zh&quot;&gt;   
&lt;head&gt;   
    &lt;meta charset=&quot;UTF-8&quot;&gt;   
    &lt;title&gt;textBaseline&lt;/title&gt;   
    &lt;style&gt;   
        body { background: url(&quot;./images/bg3.jpg&quot;) repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    &lt;/style&gt;   
&lt;/head&gt;   
&lt;body&gt;   
&lt;p id=&quot;canvas-warp&quot;&gt;   
    &lt;canvas id=&quot;canvas&quot;&gt;   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    &lt;/canvas&gt;   
&lt;/p&gt;   
  
&lt;script&gt;   
    window.onload = function(){   
        var canvas = document.getElementById(&quot;canvas&quot;);   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext(&quot;2d&quot;);   
        context.fillStyle = &quot;#FFF&quot;;   
        context.fillRect(0,0,800,600);   
  
        //在位置 y=300 绘制蓝色线条   
        context.strokeStyle=&quot;blue&quot;;   
        context.moveTo(0,300);   
        context.lineTo(800,300);   
        context.stroke();   
  
        context.fillStyle = &quot;#00AAAA&quot;;   
        context.font=&quot;20px Arial&quot;;   
  
        //在 y=300 以不同的 textBaseline 值放置每个单词   
        context.textBaseline=&quot;top&quot;;   
        context.fillText(&quot;Top&quot;,150,300);   
        context.textBaseline=&quot;bottom&quot;;   
        context.fillText(&quot;Bottom&quot;,250,300);   
        context.textBaseline=&quot;middle&quot;;   
        context.fillText(&quot;Middle&quot;,350,300);   
        context.textBaseline=&quot;alphabetic&quot;;   
        context.fillText(&quot;Alphabetic&quot;,450,300);   
        context.textBaseline=&quot;hanging&quot;;   
        context.fillText(&quot;Hanging&quot;,550,300);   
    };   
&lt;/script&gt;   
&lt;/body&gt;   
&lt;/html&gt;

Salin selepas log masuk

运行结果：

Atas ialah kandungan terperinci HTML5 Canvas实现文本对齐的代码总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn