HTML Canvas 文本颜色
HTML Canvas 文本颜色
要设置 Canvas 上的文本颜色，我们使用两个属性：
-
fillStyle- 定义文本的填充颜色 -
strokeStyle- 定义文本轮廓的颜色
fillStyle 属性
fillStyle 属性定义了文本的填充颜色。
示例
将字体设置为 50px "Arial"。将填充颜色设置为紫色。在 Canvas 上写入填充文本。从位置 (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"。将轮廓颜色设置为紫色。在 Canvas 上写入轮廓文本。从位置 (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>
自己动手试一试 »
