zoukankan      html  css  js  c++  java
  • 【canvas】基础练习二 文字

    demo1 fillText strokeText绘制文字

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title> fillText strokeText</title>
    </head>
    <body>
    
    <canvas id="wapper" width="500" height="500"></canvas>
    
    <script>
    	var wapper = document.getElementById('wapper'),
    		_2d = wapper.getContext('2d');/*2d的绘制对象*/
    
    	_2d.font='30px Arial';
    	_2d.fillText('dtdxrk',50,50);/*fillText(text,x,y,max width)*/
    	_2d.strokeText('dtdxrk',50,100);/*strokeText(text,x,y,max width)*/
    
    </script>
    </body>
    </html>
    

      

    demo2 字体 大小 粗细

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>字体 大小 粗细</title>
    </head>
    <body>
    
    <canvas id="wapper" width="500" height="500"></canvas>
    
    <script>
    	var wapper = document.getElementById('wapper'),
    		_2d = wapper.getContext('2d');/*2d的绘制对象*/
    
    	_2d.font='30px Arial';
    	_2d.fillText('dtdxrk',10,30);/*fillText(text,x,y,max width)*/
    
    	_2d.font='italic 40px simsun';
    	_2d.fillText('dtdxrk',10,100);/*fillText(text,x,y,max width)*/
    	
    	_2d.font='bold 22px simsun';
    	_2d.fillText('dtdxrk',10,150);/*fillText(text,x,y,max width)*/
    </script>
    </body>
    </html>
    

      

    demo3 文字对齐 textAlign textBaseline

    感觉没啥好说的

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

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

      

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

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

      

     

  • 相关阅读:
    基于JavaMail开发邮件发送器工具类
    微服务架构
    图像识别
    Manacher
    左偏树
    虚树
    动态树(Link-Cut Tree)
    Splay
    扩展中国剩余定理(EXCRT)
    K-D树
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/4441705.html
Copyright © 2011-2022 走看看