Canvas

Download Report

Transcript Canvas 

Canvas là gì ?
2. Cách sử dụng Canvas + demo.
1.
Canvas là gì ?
 Canvas là một thẻ mới có trong html5 như các thẻ <div> <span> trong html.
 Thẻ <canvas> được sử dụng để vẽ đồ họa như hình ảnh, chữ viết … thông qua
ngôn ngữ kịch bản (script) mà thường là javascript.
 Thẻ <canvas> chỉ được sử dụng làm thẻ chứa các hình ảnh đồ họa. Còn việc vẻ
lên cách hình ảnh đó như thế nào phải thông qua script.
 Thẻ <canvas> có nhiều method cho việc vẽ các đường, hình hộp, hình tròn,
chữ viết và chèn hình ảnh …
 Chỉ có Internet Explorer 9 trở lên, Firefox, Opera, Chrome, and Safari mới hỗ
trợ thẻ này.
Tạo thẻ canvas
 Việc tạo thẻ canvas cũng như các thẻ khác, nó cũng chiếm một vùng không
gian hình chữ nhật trong trang html. Có thể thay đổi chiều rộng,cao cũng như
các thuộc tính khác thông qua style hay css.
 Lưu ý : Như đã nói vì việc vẽ hình trong thẻ canvas thông qua script nên luôn
luôn tạo một id cho thẻ canvas để script tham chiếu đến và gán luôn chiều rộng
và cao cho thẻ.
 Ví dụ :
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200"
height="100" style="border:1px solid #000000;">
Trình duyệt không hỗ trợ thẻ canvas.
</canvas>
</body>
</html>
Vẽ lên thẻ canvas bằng
javascript
 FillStyle là màu CSS
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas
tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Method getContext(“2d”) trả về 1 html5 object có nhiều thuộc tính và method cho việc vẽ các
hình. Bắt buộc phải để chữ 2d vào method để vẽ.
Thuộc tính fillStyle có thể là màu CSS, gradient(dốc), or a pattern(mẫu vẽ).
Method fillRect(x,y,rộng,cao) vẽ một hình chữ nhật được fill(tô, làm đầy) bởi fillStyle hiện
tại.
Vẽ lên thẻ canvas bằng
javascript
 FillStyle là gradient : Gradient là kiểu tô hình với màu sắc biến đổi dần từ màu này
sang mày khác. Gradient có thể dùng để fill bất cứ dạng hình nào như chữ nhật, tròn
...
 Có 2 loại gradient : createLinearGradient(x,y,x1,y1) – dạng màu sắc biến đổi theo 1
đường thẳng và createRadialGradient(x,y,r,x1,y1,r1) – dạng màu sắc biến đổi theo
hình tròn.
 CreateLinearGradient(x,y,x1,y1) : x,y là tọa độ điểm màu sắc bắt đầu; x1,y1 là tọa
độ điểm bắt đầu màu sắc kết thúc.
 CreateRadialGradient(x,y,r,x1,y1,r1) : cũng tương tự như trên, nhưng khác là có
thêm r,r1 tương ứng với chiều dài tọa độ hình tròn của màu sắc bắt đầu và màu kết
thức.
 Để có cái nhìn rõ hơn chúng ta đi vào 2 ví dụ sau.
Vẽ lên thẻ canvas bằng
javascript
 FillStyle là gradient ví dụ 1 :
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px
solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,“white");
grd.addColorStop(1,“black");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(0,0,400,400);
</script>
</body>
</html>
Vẽ lên thẻ canvas bằng
javascript
 FillStyle là gradient ví dụ 2 :
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px
solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(200,200,100,200,200,200);
grd.addColorStop(0,"white");
grd.addColorStop(1,"black");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(0,0,400,400);
</script>
</body>
</html>
Vẽ lên thẻ canvas bằng
javascript
 FillStyle là Pattern
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<img
src="http://www.html5canvastutorials.com/demos/assets/woodpattern.png"/>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src =
'http://www.html5canvastutorials.com/demos/assets/woodpattern.png';
var pattern = context.createPattern(imageObj, 'repeat');
context.fillStyle = pattern;
context.fillRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>
Vẽ Path(Đường) bằng javascript
trên thẻ canvas
 Vẽ đường thẳng


Để vẽ ta sử dụng 2 method : moveTo(x,y) xác định tọa độ vị trí bắt đầu vẽ và lineTo(x,y) xác định tọa
độ vị trí kết thúc.
Để vẽ, ta phải sử dụng một trong những "ink" (mực) methods, như stroke()[nét bút].
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,100);(1)
ctx.lineTo(200,100); (2)
ctx.lineTo(100,0); (3)
ctx.stroke();
</script>
</body>
</html>
(1)
(1)+(2)
(1)+(2)+(3)
Vẽ Path(Đường) bằng javascript
trên thẻ canvas
 Vẽ đường tròn


Để vẽ ta sử dụng method : arc(x,y,r,start,stop)
Để vẽ, ta phải sử dụng một trong những "ink" (mực) methods, như stroke()[nét bút].
<!DOCTYPE html>
<html>
<body>
(1)
<canvas id="myCanvas" width="400" height="400"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(200,200,100,0,1.5*Math.PI);(1)
ctx.arc(200,200,50,0.5*Math.PI,1.5*Math.PI);(2)
ctx.stroke();
</script>
</body>
</html>
(1)+(2)
(2)
Vẽ Path(Đường) bằng javascript
trên thẻ canvas
 Vẽ chữ

Để vẽ ta sử dụng : thuộc tính font – xác định font chữ; method fillText(text,x,y) hoặc
strokeText(text,x,y) với text là dòng chữ muốn vẽ lên, x và y tương ứng là tọa độ bắt đầu vẽ. Method
fillText sẽ tô luôn chữ trong khi strokeText chỉ vẽ mà không tô.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);(1)
ctx.strokeText("Hello World",10,50);(2)
</script>
</body>
</html>
(1)
(2)
Vẽ Image(Hình) bằng javascript
trên thẻ canvas
 Để vẽ ta dùng method drawImage(image,x,y) để vẽ hình với image là hình
ta muốn vẽ, x và y tương ứng với tọa độ
<!DOCTYPE html>
<html>
<head><style>div{float:left;margin:5px;}</style></head>
<body>
<div><p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream"
width="220" height="277"></div>
<div><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas
tag.</canvas></div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
</body>
</html>
Kết thúc
 Cảm ơn.
 Để biết thêm chi tiết về tất cả các hàm và thuộc tính trong thẻ canvas hãy
truy cập địa chỉ sau : http://www.w3schools.com/tags/ref_canvas.asp