Màu văn bản canvas HTML
Màu văn bản canvas HTML
Để đặt màu của văn bản trên khung vẽ, chúng tôi sử dụng hai thuộc tính:
-
fillStyle
- xác định màu tô cho văn bản -
strokeStyle
- xác định màu của văn bản phác thảo
Thuộc tính fillStyle
Thuộc tính fillStyle
xác định màu tô của văn bản.
Ví dụ
Đặt phông chữ thành 50px "Arial". Đặt màu tô thành màu tím. Viết văn bản đã điền trên canvas. Bắt đầu ở vị trí (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>
Hãy tự mình thử » Thuộc tính StrokeStyle
Thuộc tính strokeStyle
xác định màu của đường viền văn bản.
Ví dụ
Đặt phông chữ thành 50px "Arial". Đặt màu đường viền thành màu tím. Viết văn bản phác thảo trên canvas. Bắt đầu ở vị trí (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>
Hãy tự mình thử »Tô màu văn bản bằng gradient
Ví dụ
Ở đây chúng ta tô màu văn bản bằng một gradient:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// Fill text with gradient
ctx.font = "50px Arial";
ctx.fillStyle =
grad;
ctx.fillText("Hello World",10,80);
</script>
Hãy tự mình thử »Điền văn bản có đường viền bằng gradient
Ví dụ
Ở đây chúng tôi điền vào văn bản có đường viền bằng một dải màu:
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// Fill outlined text with gradient
ctx.font = "50px Arial";
ctx.strokeStyle = grad;
ctx.strokeText("Hello World",10,80);
</script>
Hãy tự mình thử »