Ví dụ và cách sử dụng phương thức drawImage[] để hiển thị ảnh, tranh hoặc video trong canvas.
in Thư viện thuộc tính HTML
Ảnh sử dụng:
Vẽ ảnh trên Canvas:
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Ảnhsửdụng: Canvas: Trình duyệtcủabạnkhônghỗtrợ thẻcanvas trong HTML5. varc=document.getElementById["myCanvas"]; varctx= c.getContext["2d"]; varimg=document.getElementById["scream"]; ctx.drawImage[img,10, 10];
|
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| drawImage[] | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức drawImage[] sử dụng để hiển thị ảnh, tranh hoặc video trong canvas.
Phương thức drawImage[] cũng có thể hiển thị một phần của ảnh, và/hoặc tăng/giảm kích cỡ ảnh.
Cú pháp JavaScript
Vị trí của ảnh trên canvas
Cú pháp: context.drawImage[img,x,y];
Vị trí của ảnh trên canvas và chỉ định chiều rộng và chiều cao của ảnh:
Cú pháp: context.drawImage[img,x,y,width,height];
Cắt ảnh và hiển thị phần vừa cắt lên một vị trí trong canvas:
Cú pháp: context.drawImage[img,sx,sy,swidth,sheight,x,y,width,height];
Giá trị tham số
| img | Thẻ ảnh, tranh hoặc video được sử dụng |
| sx | Tùy chọn. Tọa độ X điểm bắt đầu cắt |
| sy | Tùy chọn. Tọa độ Y điểm bắt đầu cắt |
| swidth | Tùy chọn. Chiều rộng của ảnh được cắt |
| sheight | Tùy chọn. Chiều cao của ảnh được cắt |
| x | Tọa độ X để đặt ảnh trên canvas |
| y | Tọa độ Y để đặt ảnh trên canvas |
| width | Tùy chọn. Chiều rộng của ảnh [kéo dài hoặc thu nhỏ ảnh] |
| height | Tùy chọn. Chiều cao của ảnh [kéo dài hoặc thu nhỏ ảnh] |
Ví dụ
Vị trí của ảnh trên canvas và chỉ định chiều rộng và chiều cao của ảnh:
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Ảnhsửdụng: Canvas: Trình duyệtcủabạnkhônghỗtrợ thẻcanvas trong HTML5. varc=document.getElementById["myCanvas"]; varctx= c.getContext["2d"]; varimg=document.getElementById["scream"]; ctx.drawImage[img,10, 10,150,180];
|
Demo
Cắt ảnh và hiển thị phần vừa cắt lên một vị trí trong canvas:
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | Ảnhsửdụng: Canvas: Trình duyệtcủabạnkhônghỗtrợ thẻcanvas trong HTML5. document.getElementById["scream"].onload=function[]{ var c=document.getElementById["myCanvas"]; varctx=c.getContext["2d"]; varimg= document.getElementById["scream"]; ctx.drawImage[img,90,130,50,60,10,10, 50,60]; };
|
Demo
Video sử dụng [nhấn vào video để bắt đầu]:
Trên canvas:
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | Videosửdụng: Trên canvas[hiểnthịkhunghình hiệntạicủavideo saumỗi20mili giây]: Trình duyệtcủa bạnkhônghỗtrợthẻcanvas trong HTML5. varv= document.getElementById["video1"]; varc=document.getElementById["myCanvas"]; ctx=c.getContext["2d"]; v.addEventListener["play",function[]{vari=window.setInterval[function[] {ctx.drawImage[v,5,5,260,125]},20];},false]; v.addEventListener["pause", function[]{window.clearInterval[i];},false]; v.addEventListener["ended",function[] {clearInterval[i];},false];
|
Demo