溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下HTML5畫布設置字體顏色的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
在HTML5畫布中我們可以使用fillStyle屬性來設置文本的字體顏色，它可以接受一個顏色的代碼值，比如#cc0000，也可以接受一個顏色的英文單詞，比如red。下面我們就來了解一下，希望對大家有所幫助。
首先我們需要在HTML頁面中使用canvas標簽創建一個畫布，設置其id值為myCanvas。
<canvas id="myCanvas"></canvas>
然后使用JavaScript在畫布中繪制文本圖形
1、獲取到canvas控件
var canvas = document.getElementById("myCanvas");// 查找畫布元素2、使用getContext()方法配置繪圖的環境，創建繪圖對象
var ctx = canvas.getContext("2d");3、通過fillText方法來在canvas里寫上文本，參數分別為文本內容，和文本所在的位置。
我們也可以使用font屬性來設置一下文本的字體大小和字體類型。
ctx .font="20px 微軟雅黑";
ctx .fillText('億速云',20,20,200);可以看到現在頁面上顯示的文本是默認的黑色文字。
3、想要設置文本的字體顏色，就需要使用fillStyle屬性，這個屬性可以接受一個顏色的代碼值，比如#cc0000，也可以接受一個顏色的英文單詞，比如red。
ctx .fillStyle="red";
完整js代碼：
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");// 查找畫布元素
var ctx = canvas.getContext("2d");
ctx .font="20px 微軟雅黑";
ctx .fillStyle="red";
ctx .fillText('億速云',20,20,200);
</script>看完了這篇文章，相信你對HTML5畫布設置字體顏色的方法是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
