您也可以在画布上绘制文本。这些文本可以包含任何Unicode字符。下面的示例将绘制一个简单的问候消息“ Hello World!”。在画布上。
例试试这个代码»
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.fillText("Hello World!", 50, 100);
};
</script>
您还可以设置画布上文本的颜色和对齐方式,如下所示:
例试试这个代码»
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "orange";
context.fillText("Hello World!", 150, 100);
};
</script>
您也可以使用strokeText()方法在文本上应用笔触。此方法将为文本的周围着色而不是填充文本。但是,如果要在画布上同时设置填充和笔触,则可以同时使用fillText()和strokeText()方法。
例试试这个代码»
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.strokeStyle = "orange";
context.strokeText("Hello World!", 150, 100);
};
</script>
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h60952.shtml