標籤：
1 <!DOCTYPE html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Insert you title</title> 5 <meta name=‘description‘ content=‘this is my page‘> 6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> 7 <meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘> 8 <link rel=‘stylesheet‘ type=‘text/css‘ href=‘./css/index.css‘ /> 9 <script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>10 <style type=‘text/css‘>11 html,body,canvas {12 margin: 0; padding: 0;13 }14 15 html {16 height: 100%17 }18 19 body {20 background: #000;21 }22 23 #can {24 background: #FFF; display: block; margin: 25px auto; border-radius: 2px;line-height:0;25 }26 </style>27 <script type=‘text/javascript‘>28 $( function(){29 var can = $( ‘#can‘ ).get( 0 );30 var oCan = can.getContext( ‘2d‘ );31 var w = can.width;32 var h = can.height;33 oCan.font = ‘50px 楷體‘; /* 字型大小 字型缺一不可 */34 oCan.strokeText( ‘窗欞‘ , 200 , 175 );35 oCan.font = ‘900 50px Courier New‘; /* 可以補充加粗方式但字型大小 字型缺一不可 並且以不同的方式來進行填充是可以更改字型的 */36 oCan.strokeStyle = ‘#F00‘;37 oCan.textAlign =‘center‘ /* 設定水平置中方式 */38 oCan.textBaseline = ‘middle‘; /* 設定垂直置中方式 */39 var text = ‘chuangling‘;40 oCan.fillText( text , w/2 , h/2 ); /* 建立文本的自適應置中方式 */41 alert(oCan.measureText(text).width); /* 可以擷取文本的實際寬度值,只有寬度 measure : 測量 */42 } );43 </script>44 </head>45 <body>46 <canvas id=‘can‘ width=‘500‘ height=‘450‘>檢測到您的瀏覽器版本過低請升級您的瀏覽器版本,以擷取更好的使用體驗...</canvas>47 </body>48 </html>
[ html canvas font textAlign textBaseline measureText().width ] canvas繪圖屬性 font textAlign textBaseline measureText().width 屬性示範
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
