canvas繪製文字

時間 2019-12-01

標籤 canvas 繪製文字简体版

原文原文鏈接

繪製字體時可使用fillText方法或者strokeText方法。canvas

fillText方法用填充的方式來繪製字符串函數

context.fillText (text, x,y,[maxwidth]);字體

strokeText方法用輪廓的方式來繪製字符串.編碼

context.strokeText (text, x,y,[maxwidth]);spa

第一個參數text表示要繪製的文字，code

第二個參數x表示要繪製的文字的起點橫座標，視頻

第三個參數y表示要繪製的文字的起點縱座標，對象

第四個參數maxwidth 爲可選參數，表示顯示文字的時候最大的寬度，能夠防止文字溢出blog

在body的屬性裏面，使用onload="draw('canvas' )「語句，調用腳本文件中的draw函數進行圖形繪畫教程

畫布的建立方法：指定 id ， width（畫布寬度）， height（畫布高度）

建立一個畫布，長度爲800，高度爲300

1 <body onload="draw('canvas')">
2 <canvas id="canvas" width="800" height="300" ></canvas>
3 </body>

引入一個名爲canvas的is腳本，js腳本的語言編碼是utf-8

 1 function draw(id){  2     var canvas = document.getElementById(id);  3     var context = canvas.getContext('2d');  //獲取對應的2D對象(畫筆)
 4     context.fillStyle = 'green';  //設置填充的背景顏色
 5     context.fillRect(0,0,800,300); //繪製 800*300 像素的已填充矩形：
 6     context.fillStyle = '#fff';  7     context.strokeStyle = '#fff'; //設置筆觸的顏色
 8     context.font = "bold 40px '字體','字體','微軟雅黑','宋體'"; //設置字體
 9     context.textBaseline = 'hanging'; //在繪製文本時使用的當前文本基線
10     context.fillText('歡迎收看' ,10 ,40); //設置文本內容
11     context.fillText('《canvas輕鬆入門》',40,110); 12     context.fillText('視頻教程',580,180); 13 }