Canvas繪製文字（七）
阿新 • • 發佈：2018-12-12
canvas的文字是以圖形形式繪製的，實際他不是文字，只是像文字而已；一旦繪製之後，無法編輯，除非擦除文字，重新繪製。沒有充分的理由，最好使用普通的HTML元素，否則一定不要在canvas中建立文字。
context.fillText(text,x,y);
引數x,y表示文字原點（文字左下角位置）
引數text就是文字內容
此為填充字
context.strokeText(text,x,y);
引數x,y表示文字原點（文字左下角位置）
引數text就是文字內容
此為描邊程式碼很簡單
<!DOCTYPE html> <!-- 告訴瀏覽器我們使用的HTML模板為HTML5 --> <html lang="en"> <!-- 網頁頁面的根，其他元素均放在其中，只能有一個 --> <head> <!--頁面所有meta元素均包含在這裡 --> <meta charset="UTF-8"> <!-- 編碼方式 --> <title>Canves高速入門</title> <!-- 頁面設定名稱，顯示在瀏覽器標題欄中 --> <!-- CSS 及 javascript 程式碼放置處 --> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery庫--> <script type="text/javascript"> $(document).ready(function(){ //alert("HELLO WORLD!!!") var canvas = $("#mycanvas"); var context = canvas.get(0).getContext("2d"); var text = " hello , world!"; context.fillStyle = "#124353"; //顏色 context.font = "italic 30px serif";//斜體 字號 字型 context.fillText(text,40,40); //填充字 context.strokeStyle = "#34ab12"; //顏色 context.font = "italic 50px serif";//斜體 字號 字型 context.strokeText(text,100,100); //勾勒字（描邊） }); </script> </head> <body> <!-- 頁面的主題內容均在這裡 --> <canvas width="500" height="500" id="mycanvas" style="background-color: #113344"></canvas> </body> </html>
效果圖：
