HTML5 Canvas - Pattern và Shadow
Tạo Pattern
Có phương thức sau để tạo một pattern trên canvas:
| STT | Phương thức và Miêu tả |
|---|---|
| 1 | createPattern(image, repetition) Phương thức này sẽ sử dụng image để tạo pattern. Tham số thứ hai sẽ là một chuỗi với một trong các giá trị sau: repeat, repeat-x, repeat-y, và no-repeat. Nếu chuỗi trống hoặc null, sự lặp lại là không có. |
Ví dụ
Sau đây là ví đụ đơn giản sử dụng phương thức ở trên để tạo một pattern đẹp:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// create new image object to use as pattern
var img = new Image();
img.src = 'images/pattern.jpg';
img.onload = function(){
// create pattern
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150);
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
Giả sử chúng ta có pattern sau images/pattern.jpg.
Ví dụ trên sẽ vẽ kết quả sau:
Tạo Shadow
HTML5 canvas cung cấp các khả năng để tạo một shadow đẹp quanh một hình vẽ. Tất cả hoạt động vẽ bị ảnh hưởng bởi 4 thuộc tính global sau:
| STT | Thuộc tính và Miêu tả |
|---|---|
| 1 | shadowColor [ = value ] Thuộc tính này trả về màu shadow hiện tại và có thể được thiết lập để thay đổi màu shadow. |
| 2 | shadowOffsetX [ = value ] Thuộc tính này trả về offset X và có thể được thiết lập để thay đổi offset X |
| 3 | shadowOffsetY [ = value ] Thuộc tính này trả về offset Y hiện tại và có thể được thiêt lập |
| 4 | shadowBlur [ = value ] Thuộc tính này trả về mức độ hiện tại của blur (mờ) áp dụng tới các shadow và có thể được thiết lập để thay đổi mức độ blur. |
Ví dụ
Sau đây là ví dụ sử dụng các thuộc tính trên để vẽ một shadow.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("This is shadow test", 5, 30);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
Ví dụ trên sẽ cho kết quả sau:
Công cụ giáo viên (2048.VN)
Tạo- trộn đề thi miễn phí từ file PDF, Word, Giao bài nhanh chóng, Hoàn toàn Free
Bài học HTML5 phổ biến khác tại vietjack.com:
Dành cho bạn
Công cụ giáo viên
- Tạo đề online từ PDF / Word
- Trộn nhiều mã đề, in Offline
- Giao bài online, Quản lí lớp học
