Chuyển màu Canvas HTML
Chuyển màu Canvas HTML
Chuyển màu cho phép bạn hiển thị các chuyển tiếp mượt mà giữa hai hoặc nhiều màu được chỉ định.
Chuyển màu có thể được sử dụng để điền vào hình chữ nhật, hình tròn, đường thẳng, văn bản, v.v.
Có hai phương pháp được sử dụng để tạo gradient:
-
createLinearGradient()- tạo một gradient tuyến tính -
createRadialGradient()- tạo gradient xuyên tâm/tròn
Phương thức createLinearGradient()
Phương thức createLinearGradient() được sử dụng để xác định gradient tuyến tính.
Dải màu chuyển sắc tuyến tính thay đổi màu dọc theo mẫu tuyến tính (theo chiều ngang/dọc/chéo).
Phương thức createLinearGradient() có các tham số sau:
| Parameter | Description |
|---|---|
| x0 | Required. The x-coordinate of the start point |
| y0 | Required. The y-coordinate of the start point |
| x1 | Required. The x-coordinate of the end point |
| y1 | Required. The y-coordinate of the end point |
Đối tượng chuyển màu yêu cầu hai hoặc nhiều điểm dừng màu.
Phương thức addColorStop() chỉ định các điểm dừng màu và vị trí của nó dọc theo dải màu. Các vị trí có thể nằm trong khoảng từ 0 đến 1.
Để sử dụng dải màu, hãy gán nó cho thuộc tính fillStyle hoặc strokeStyle , sau đó vẽ hình dạng (hình chữ nhật, hình tròn, hình dạng hoặc văn bản).
Ví dụ
Tạo một gradient tuyến tính với hai điểm dừng màu; màu xanh lam nhạt ở điểm bắt đầu của dải màu và màu xanh lam đậm ở điểm kết thúc. Sau đó, tô màu hình chữ nhật bằng 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 rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script> Hãy tự mình thử »Ví dụ
Ở đây chúng ta tô màu một hình chữ nhật có đường viền bằng 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 outlined rectangle with gradient
ctx.lineWidth = 10;
ctx.strokeStyle = grad;
ctx.strokeRect(10,10,280,130);
</script> Hãy tự mình thử » Ví dụ
Tạo một gradient tuyến tính với ba điểm dừng màu, màu xanh lam nhạt ở điểm bắt đầu của gradient, màu tím ở điểm giữa của gradient và màu xanh đậm ở điểm kết thúc. Sau đó, tô màu hình chữ nhật bằng 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(0.5, "purple");
grad.addColorStop(1, "darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script> Hãy tự mình thử »Độ dốc tuyến tính dọc
Độ dốc ngang đi từ trái sang phải và được tạo bằng cách thay đổi các tham số trên trục x (x1 và x2). Các ví dụ trên đều là các gradient tuyến tính nằm ngang.
Độ dốc dọc đi từ trên xuống dưới và được tạo bằng cách thay đổi các tham số trên trục y (y1 và y2).
Ví dụ
Tạo gradient tuyến tính dọc bằng cách thay đổi các giá trị tham số trên trục y (thay đổi y2):
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0,
0,130);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script> Hãy tự mình thử »Độ dốc tuyến tính chéo
Độ dốc đường chéo được tạo bằng cách thay đổi cả tham số trục x và trục y.
Ví dụ
Tạo một gradient tuyến tính chéo bằng cách thay đổi cả tham số trục x và y (thay đổi x2 và y2):
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create linear gradient
const grad=ctx.createLinearGradient(0,0,
280,130);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");
// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script> Hãy tự mình thử »Tô màu vòng tròn bằng gradient
Ví dụ
Ở đây chúng ta tô một vòng trò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 circle with gradient
ctx.beginPath();
ctx.arc(145, 75, 65,
0, 2 * Math.PI);
ctx.fillStyle = grad;
ctx.fill();
</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ử »