HTML 画布 文本颜色
HTML 画布文本颜色
要设置画布上文本的颜色，我们使用两个属性
-
fillStyle- 定义文本的填充颜色 -
strokeStyle- 定义文本轮廓的颜色
fillStyle 属性
fillStyle 属性定义文本的填充颜色。
示例
将字体设置为 50px "Arial"。将填充颜色设置为紫色。在画布上写下填充的文本。从位置 (10,80) 开始
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.fillStyle = "purple";
ctx.fillText("Hello World",10,80);
</script>
自己尝试 »
strokeStyle 属性
strokeStyle 属性定义文本轮廓的颜色。
示例
将字体设置为 50px "Arial"。将轮廓颜色设置为紫色。在画布上写下轮廓的文本。从位置 (10,80) 开始
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,80);
</script>
自己尝试 »
使用渐变填充文本
示例
这里我们使用渐变填充文本
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建线性渐变
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 使用渐变填充文本
ctx.font = "50px Arial";
ctx.fillStyle = grad;
ctx.fillText("Hello World",10,80);
</script>
自己尝试 »
使用渐变填充轮廓文本
示例
这里我们使用渐变填充轮廓文本
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建线性渐变
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// 使用渐变填充轮廓文本
ctx.font = "50px Arial";
ctx.strokeStyle = grad;
ctx.strokeText("Hello World",10,80);
</script>
自己尝试 »
