Thứ Tư, 10 tháng 4, 2013

HTML canvas - vẽ đồ họa trên html5

<canvas> HTML 5+

<canvas> trong HTML là một thẻ đặc biệt, mới được phát triển từ phiên bản HTML5. <canvas> kết hợp với javaScript tạo nên ứng dụng tuyệt vời để hiển thị các hình họa cơ sở. Nếu như trước kia ta phải dùng đến link ảnh, thì ngày nay chúng ta có thể tạo những biểu đồ, hình vẽ cơ sở như hình hộp, hình tròn, hình cầu,... chỉ bằng những dòng code.


Tag   Mô tả  
    Màu sắc, phong cách, và bóng đổ  
fillStyle
?
Xem ví dụ
<canvas id="fillStyle0" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c=document.getElementById("fillStyle0");
var ctx=c.getContext("2d");
ctx.fillStyle="#00ff77";
ctx.fillRect(20,20,150,100);
</script>
Xem Kết quả
Bộ hoặc trả về màu sắc, độ dốc, hoặc mô hình được sử dụng để điền vào các bản vẽ  
strokeStyle
?
Xem ví dụ
<canvas id="myCanvas" width="500" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="90px time news roman";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Bendoi.vn",10,90);
</script>
Xem Kết quả
Bộ hoặc trả về màu sắc, độ dốc, hoặc mô hình được sử dụng ở đường viền  
shadowColor
?
Xem ví dụ
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.fillStyle="#E7AAAA";
ctx.shadowColor="black";
ctx.fillRect(20,20,100,80);
ctx.shadowColor="blue";
ctx.fillRect(140,20,100,80);
</script>
Xem Kết quả
Bộ hoặc trả về màu sắc sử dụng cho bóng tối  
shadowblur
?
Xem ví dụ
<canvas id="shadowblur00" width="500" height="150" style="border:0px solid #ccc"></canvas>
<script>
var c=document.getElementById("shadowblur00");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="#D9D9D9";
ctx.fillRect(20,20,100,80);
</script>
Xem Kết quả
Bộ hoặc trả về màu sắc sử dụng cho bóng tối  
shadowOffsetX
?
Xem ví dụ
<canvas id="shadowOffsetX00" width="500" height="150" style="border:0px solid #ccc"></canvas>
<script>
var c=document.getElementById("shadowOffsetX00");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="#FAC8C8";
ctx.fillRect(20,20,100,80);
</script>
Xem Kết quả
Thiết lập bóng tối đổ theo chiều X (ngang)  
shadowOffsetY
?
Xem ví dụ
<canvas id="shadowOffsetY00" width="500" height="150" style="border:0px solid #ccc"></canvas>
<script>
var c=document.getElementById("shadowOffsetY00");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="#FAC8C8";
ctx.fillRect(20,20,100,80);
</script>
Xem Kết quả
Thiết lập bóng tối đổ theo chiều Y (dọc)  
createLinearGradient ()
?
Xem ví dụ
<canvas id="createLinearGradient0" width="500" height="150" style="border:0px solid #ccc"></canvas>
<script>
var c=document.getElementById("createLinearGradient0");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"#0C7D0C");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>
<canvas id="createLinearGradient01" width="500" height="150" style="border:0px solid #ccc"></canvas>
<script>
var c=document.getElementById("createLinearGradient01");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"#017EAF");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>
Xem Kết quả
Tạo ra một sự chuyển sắc thái màu như: từ đậm đậm nhạt, từ tối đến sáng.  
createPattern ()
?
Xem ví dụ

<img src="http://png-4.findicons.com/files/icons/1018/pixelicious/32/star.png" id="lamp00" width="32" height="32"><br/>
Canvas:<br/>
<button onclick="draw('repeat')">Repeat</button>
<button onclick="draw('repeat-x')">Repeat-x</button>
<button onclick="draw('repeat-y')">Repeat-y</button>
<button onclick="draw('no-repeat')">No-repeat</button>
<canvas id="createPattern00" width="300" height="150" style="border:1px solid #d3d3d3;">
<script>
function draw(direction)
{
var c=document.getElementById("createPattern00");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height);
var img=document.getElementById("lamp00")
var pat=ctx.createPattern(img,direction);
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
}
</script>
Xem Kết quả
Canvas:

 Lặp đi lặp lại một yếu tố quy định theo hướng quy định  
createRadialGradient ()
?
Xem ví dụ
<canvas id="createRadialGradient00" width="500" height="150" style="border:0px solid #ccc"></canvas>
<script>
var c=document.getElementById("createRadialGradient00");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,1,90,60,70);
grd.addColorStop(0,"#D78432");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100)
/*
createRadialGradient (. x0, y0, r0, x1, y1, r1 );
x0 X-phối hợp của các vòng tròn bắt đầu của gradient
y0 Toạ độ y của vòng tròn bắt đầu của gradient
r0 Bán kính của vòng tròn bắt đầu
x1 X-phối hợp của các vòng tròn kết thúc của gradient
y1 Toạ độ y của vòng tròn kết thúc của gradient
r1 Bán kính của vòng tròn kết thúc
*/
</script>
Xem Kết quả
Sự chuyển màu từ tâm hình tròn  
addColorStop ()
?
Xem ví dụ
<canvas id="addColorStop00" width="500" height="150" style="border:0px solid #ccc"></canvas>
<script>
var c=document.getElementById("addColorStop00");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>
Xem Kết quả
Sự chuyển sắc thái màu tại nhiều vị trí  
  Kiểu đường thẳng  
lineCap
?
Xem ví dụ
<canvas id="lineCap00" width="500" height="150"></canvas>
<script>
var c=document.getElementById('lineCap00');
var ctx=c.getContext('2d');
ctx.lineWidth=10;
ctx.lineCap='square';
ctx.moveTo(20,20);
ctx.lineTo(100,100);
ctx.stroke();
/*context.lineCap="butt|round|square"; (cạnh phẳng|nắp tròn| đầu vuông)*/
</script>
Xem Kết quả
Phong cách của 2 đầu đoạn thẳng  
lineJoin
?
Xem ví dụ
<canvas id="linejoin00" width="500" height="150"></canvas>
<script>
var c=document.getElementById("linejoin00");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();
/*
context.lineJoin="bevel|round|miter"; (đầu vát|đầu tròn|đầu nhọn)
*/
</script>
Xem Kết quả
Phong cách của đầu góc nhọn khi đoạn thẳng bị bẻ  
linewidth
?
Xem ví dụ
<canvas id="linewidth00" width="500" height="150"></canvas>
<script>
var c=document.getElementById("linewidth00");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.strokeRect(20,20,80,100);
</script>
Xem Kết quả
Thiết lập chiều rộng đường hiện tại  
miterLimit
?
Xem ví dụ
<canvas id="miterLimit0" width="500" height="150"></canvas>
<script>
var c=document.getElementById("miterLimit0");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();
</script>
Xem Kết quả
Bộ hoặc trả về chiều dài mũ tối đa  
  Hình chữ nhật  
rect ()
?
Xem ví dụ
<canvas id="rect 0" width="500" height="150"></canvas>
<script>
var c=document.getElementById("rect 0");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100); /* ( x, y, chiều rộng, chiều cao );*/
ctx.stroke();
</script>
Xem Kết quả
Tạo ra một đường hình chữ nhật  
fillRect ()
?
Xem ví dụ
<canvas id="fillRect0" width="500" height="150"></canvas>
<script>
var c=document.getElementById("fillRect0");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100); /* ( x, y, chiều rộng, chiều cao );*/
</script>
Xem Kết quả
Tạo hình chữ nhật  
strokeRect ()
?
Xem ví dụ
<canvas id="strokeRect0" width="500" height="150"></canvas>
<script>
var c=document.getElementById("strokeRect0");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);/* ( x, y, chiều rộng, chiều cao );*/
</script>
Xem Kết quả
Vẽ một hình chữ nhật (không điền)  
clearRect ()
?
Xem ví dụ
<canvas id="clearRect0" width="500" height="150"></canvas>
<script>
var c=document.getElementById("clearRect0");
var ctx=c.getContext("2d");
ctx.fillStyle="#75879F";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);
/* ( x, y, chiều rộng, chiều cao );*/
</script>
Xem Kết quả
Một hình chữ nhật trống rỗng  
  Đường dẫn  
fill()
?

Xem ví dụ
<canvas id="fill" width="500" height="150"></canvas>
<script>
var c=document.getElementById("fill");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.fillStyle="#75879F";
ctx.fill();
</script>
Xem Kết quả
phương pháp lấp đầy bản vẽ hiện hành. Màu mặc định là màu đen.  
stroke()
?
Xem ví dụ
<canvas id="demo-stroke" width="500" height="150"></canvas>
<script>
var c=document.getElementById("demo-stroke");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="red";
ctx.stroke();
</script>
Xem Kết quả
Vẽ một con đường, có hình dạng nhất định theo tọa độ điểm  
beginPath()
?
Xem ví dụ

<canvas id="demo-beginPath " width="500" height="150"></canvas>
<script>
var c=document.getElementById("demo-beginPath ");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="green"; // Green path
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // Draw it

ctx.beginPath();
ctx.strokeStyle="purple"; // Purple path
ctx.moveTo(150,0);
ctx.lineTo(10,130);
ctx.stroke(); // Draw it
</script>

Xem Kết quả
Bắt đầu một con đường, hoặc thiết lập lại đường dẫn hiện tại  
moveTo()
?
Xem ví dụ
<canvas id="demo-moveTo" width="500" height="150"></canvas>
<script>
var c=document.getElementById("demo-moveTo");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>
Xem Kết quả
Di chuyển đường dẫn đến điểm quy định trong khung hình, mà không tạo ra một dòng  
closePath ()
?
Xem ví dụ
<canvas id="demo-closePath" width="500" height="150"></canvas>
<script>
var c=document.getElementById("demo-closePath");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(225,20);
ctx.lineTo(20,100);
ctx.lineTo(450,100);
ctx.closePath();
ctx.stroke();
</script>
Xem Kết quả
Tạo ra một con đường từ điểm hiện tại để trở lại điểm khởi đầu  
lineTo ()
?
Xem ví dụ

<canvas id="demo-lineTo" width="500" height="150"></canvas>
<script>
var c=document.getElementById("demo-lineTo");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>

Xem Kết quả
Thêm một điểm mới và tạo ra một dòng từ thời điểm đó đến điểm chỉ định cuối cùng trong khung hình  
clip()
?
Xem ví dụ

<canvas id="demo-clip" width="500" height="150"></canvas>
<script>
var c=document.getElementById("demo-clip");
var ctx=c.getContext("2d");

// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="#75879F";
ctx.fillRect(0,0,150,100);
</script>

Xem Kết quả
Chọn một vùng bất kỳ hình dạng và kích thước từ hình ban đầu  
quadraticCurveTo ()
?
Xem ví dụ

<canvas id="demo-quadraticCurveTo" width="500" height="150"></canvas>
<script>
var c=document.getElementById("demo-quadraticCurveTo");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.moveTo(20,120);
ctx.quadraticCurveTo(100,-20,200,20);
ctx.stroke();
</script>
/* quadraticCurveTo (a, b, x, y ); a,b là tọa độ điểm kéo, x,y là tọa độ điểm kết thúc*/

Xem Kết quả
Tạo ra một đường cong Bézier bậc hai  
bezierCurveTo ()
?
Xem ví dụ

<canvas id="demo-bezierCurveTo" width="500" height="150"></canvas>
<script>
var c=document.getElementById("demo-bezierCurveTo");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.moveTo(20,120);
ctx.bezierCurveTo(20,10,200,100,200,20);
ctx.stroke();
</script>

Xem Kết quả
Tạo ra một đường cong Bézier khối  
arc()
?
Xem ví dụ

<canvas id="demo-arc1" width="500" height="150"></canvas>

<canvas id="demo-arc2" width="500" height="150"></canvas>
<script>
var c=document.getElementById("demo-arc1");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

var c=document.getElementById('demo-arc2');
var ctx=c.getContext('2d');
ctx.beginPath();
ctx.arc(100,75,50,0*Math.PI,1.5*Math.PI,false);
ctx.stroke();
/*
arc(x,y,r,sAngle,eAngle,true|false)
x,y Toạ độ của trung tâm của vòng tròn
r Bán kính của vòng tròn
sAngle Góc bắt đầu, trong radian (0 là ở vị trí 3 giờ của vòng tròn)
eAngle Góc kết thúc, trong radian
true: ngược chiều kim đồng Tùy chọn.
false: chiều kim đồng hồ
*/
</script>

Xem Kết quả
Tạo ra một vòng cung / đường cong (được sử dụng để tạo ra hình tròn, hoặc các bộ phận của vòng tròn)  
arcTo ()
?
Xem ví dụ

<canvas id="demo-arcTo" width="200" height="150"></canvas>

<script>
var c=document.getElementById("demo-arcTo");
var ctx=c.getContext("2d");

ctx.moveTo (20,20); // Tạo một điểm khởi đầu
ctx.lineTo (100,20); // Tạo một đường ngang
ctx.arcTo (150,20,150,70,50); // Tạo một vòng cung
ctx.lineTo (150,120); // Tiếp tục với đường thẳng đứng
ctx.stroke (); // Vẽ nó

/*
arcTo ( x1, y1, x2, y2, r );
x1,y1 tọa độ của đầu của vòng cung
x2,y2 tọa độ cuối của vòng cung
r Bán kính của vòng cung
*/
</script>

Xem Kết quả
Tạo ra một vòng cung / đường cong giữa hai tiếp tuyến  
isPointInPath ()
?
Xem ví dụ

<canvas id="demo-isPointInPath" width="200" height="150"></canvas>

<script>
var c=document.getElementById("demo-isPointInPath");
var ctx=c.getContext("2d");

ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
{
ctx.stroke();
};

/*
isPointInPath (x, y );
x,y Toạ độ y để kiểm tra
*/
</script>

Xem Kết quả
Trả về true nếu ttoaj độ điểm kiểm tra có trong con đường hiện tại  
  Biến đổi  
font
?
Xem ví dụ

<canvas id="demo-font" width="200" height="150"></canvas>

<script>
var c=document.getElementById("demo-font");
var ctx=c.getContext("2d");

ctx.font="30px Arial";
ctx.fillText("chào bạn",10,50);

/*
font="italic small-caps bold 12px arial";
~> "font-style font-variant font-weight font-size font-family"
*/
</script>

Xem Kết quả
Thiết lập các thuộc tính font hiện tại cho nội dung văn bản  
textAlign
?
Xem ví dụ

<canvas id="demo-textAlign" width="500" height="150"></canvas>

<script>
var c=document.getElementById("demo-textAlign");
var ctx=c.getContext("2d");

ctx.strokeStyle="#013874";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();

ctx.font="20px Arial";

// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);
/*
textAlign="center|end|left|right|start";
*/
</script>

Xem Kết quả
Thiết lập chiều văng bản theo phương dọc  
textBaseline
?
Xem ví dụ

<canvas id="demo-textBaseline" width="500" height="150"></canvas>

<script>
var c=document.getElementById("demo-textBaseline");
var ctx=c.getContext("2d");

//Draw a #013874 line at y=100
ctx.strokeStyle="#013874";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
/*
textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"
*/
</script>

Xem Kết quả
Thiết lập chiều văng bản theo phương ngang  
fillText ()
?
Xem ví dụ

<canvas id="demo-fillText" width="500" height="150"></canvas>

<script>
var c=document.getElementById("demo-fillText");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.fillText("Chào bạn!",10,50);

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText("Bạn thấy tôi thế nào ?",10,90);
/*
fillText(text,x,y,maxWidth); ~>( "văn bản", tọa độ x, tọa độ y, chiều rộng tối đa)
*/
</script>

Xem Kết quả
Thiết lập phần thân chữ  
strokeText ()
?
Xem ví dụ

<canvas id="demo-strokeText" width="500" height="150"></canvas>

<script>
var c=document.getElementById("demo-strokeText");
var ctx=c.getContext("2d");

ctx.font="30px Georgia";
ctx.strokeText("w3schools!",10,50);

ctx.font="40px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Là thầy vĩ đại của tôi!",10,90);
/*
strokeText(text,x,y,maxWidth); ~>( "văn bản", tọa độ x, tọa độ y, chiều rộng tối đa)
*/
</script>

Xem Kết quả
Thiết lập phần đường viền chữ  
measureText ()
?
Xem ví dụ

<canvas id="demo-measureText" width="550" height="150"></canvas>

<script>
var c=document.getElementById("demo-measureText");
var ctx=c.getContext("2d");

ctx.font="30px Arial";
var txt="web.bendoi.vn: Tổng hợp và chia sẽ!"
ctx.fillText("Dòng chữ dưới có chiều rộng là: "+ ctx.measureText(txt).width+" px ",10,50)
ctx.fillText(txt,10,100);
/*
measureText(text).width;
*/
</script>

Xem Kết quả
Đếm chiều rộng của các văn bản  
  Vẽ hình ảnh  
drawImage ()
?
Xem ví dụ

<img id="screamx" src="http://bit.ly/bendoi001" width="200"/>
<canvas id="demo-drawImage " width="550" height="150"></canvas>

<script>
var c=document.getElementById("demo-drawImage ");
var ctx=c.getContext("2d");

var img=document.getElementById("screamx");
ctx.drawImage(img,10,10);

/*
- Định vị hình ảnh:
drawImage (. img, x, y );
- Định vị hình ảnh, và xác định chiều rộng và chiều cao của hình ảnh:
drawImage (. img, x, y, width, height );
- Cắt hình ảnh và vị trí của các phần cắt:
drawImage (. img, sx, sy, swidth, sheight, x, y, width, height );

+ img: Quy định cụ thể các hình ảnh, bản vẽ, hoặc thành phần video để sử dụng
+ sx,sy: Tọa độ bắt đầu cắt
+ swidth,sheight: Chiều rộng,cao hình ảnh cắt bớt
+ x,y: Tọa độ nơi để đặt các hình ảnh trên bản vẽ
+ width,height: Chiều rộng,Chiều cao của hình ảnh để sử dụng (kéo dài hoặc làm giảm hình ảnh)
*/
</script>

Xem Kết quả
Rút ra một hình ảnh, bản vẽ, hoặc video lên tấm bạt  
Pixel Manipulation thao tác với Điểm ảnh  
width
?
Xem ví dụ


<canvas id="demo-width" width="550" height="150"></canvas><br/>

<script>
var c=document.getElementById("demo-width");
var ctx=c.getContext("2d");

var imgData=ctx.createImageData(100,100);
document.write("Chiều rộng của hình này là: " + imgData.width+"px");
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=200;
imgData.data[i+2]=120;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);
</script>

Xem Kết quả
Trả về chiều rộng của một đối tượng imageData  
height
?
Xem ví dụ


<canvas id="demo-height" width="550" height="150"></canvas><br/>

<script>
var c=document.getElementById("demo-height");
var ctx=c.getContext("2d");

var imgData=ctx.createImageData(100,70);
document.write("Chiều cao của hình này là: " + imgData.height+"px");
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=200;
imgData.data[i+2]=120;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);
</script>

Xem Kết quả
Chiều cao đối tượng  
data
?
Xem ví dụ

<canvas id="demo-data" width="550" height="150"></canvas>

<script>
var c=document.getElementById("demo-data");
var ctx=c.getContext("2d");

var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=215;
imgData.data[i+1]=212;
imgData.data[i+2]=240;
imgData.data[i+3]=200;
}
ctx.putImageData(imgData,10,10);
/*
Đây là các thông số định dạng màu dạng RGBA:
R - Màu đỏ (0-255)
G - Các màu xanh lá cây (0-255)
B - Màu xanh (0-255)
A - kênh alpha (0-255; 0 là trong suốt và 255 là hoàn toàn có thể nhìn thấy)
Bạn có thể tham khảo các màu này tại hầu hết phần mềm xử lý đồ họa, đọc mầu, chọn màu online
*/
</script>

Xem Kết quả
Trả về một đối tượng có chứa dữ liệu hình ảnh của một đối tượng imageData quy định  
createImageData ()
?
Xem ví dụ

<canvas id="demo-createImageData" width="550" height="150"></canvas>

<script>
var c=document.getElementById("demo-createImageData");
var ctx=c.getContext("2d");

var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=215;
imgData.data[i+1]=212;
imgData.data[i+2]=240;
imgData.data[i+3]=200;
}
ctx.putImageData(imgData,10,10);
/*
Có hai phiên bản của phương pháp createImageData ():

1. tạo ra một đối tượng imageData mới với kích thước quy định (tính bằng điểm):
Cú pháp JavaScript: createImageData (chiều rộng, chiều cao );

2. tạo ra một đối tượng imageData mới với kích thước tương tự như các đối tượng theo quy định của anotherImageData (điều này không sao chép các dữ liệu hình ảnh):
Cú pháp JavaScript: createImageData (đối tượng imageData)
*/
</script>

Xem Kết quả
Tạo ra một hình mới, trống đối tượng imageData  
getImageData ()
?
Xem ví dụ

<canvas id="demo-getImageData" width="150" height="150"></canvas>

<script>
var c=document.getElementById("demo-getImageData");
var ctx=c.getContext("2d");

ctx.fillStyle="#D7D4F0";
ctx.fillRect(10,10,50,50);

function copygetImageData()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
/*
getImageData (x, y, chiều rộng, chiều cao );
*/
</script>
<button onclick="copygetImageData()">Copy</button>

Xem Kết quả
Tạo bản sao dữ liệu pixel cho hình hoặc có thể đổi màu  
putImageData ()
?
Xem ví dụ

<canvas id="demo-putImageData" width="150" height="150"></canvas>

<script>
var c=document.getElementById("demo-putImageData");
var ctx=c.getContext("2d");

ctx.fillStyle="#A2BF14";
ctx.fillRect(10,10,50,50);

function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
/*
putImageData (imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight );
- imgData: Quy định cụ thể đối tượng imageData để đưa trở vào
- x,y: Toạ độ trong điểm ảnh, góc trên bên trái của đối tượng imageData
- dirtyX, dirtyY: giá trị chiều ngang, dọc, trong pixel, nơi để đặt các hình
- dirtyWidth, dirtyHeight: Chiều rộng, Chiều cao để sử dụng vẽ các hình ảnh
*/

</script>

<button onclick="copy()">Copy</button>

Xem Kết quả
Phương pháp putImageData () đặt các dữ liệu hình ảnh (từ một đối tượng imageData nào đó) trở lại vào vùng bản vẽ.  
Compositing    
globalAlpha
?
Xem ví dụ

<canvas id="demo-globalAlpha" width="150" height="150"></canvas>

<script>
var c=document.getElementById("demo-globalAlpha");
var ctx=c.getContext("2d");

ctx.fillStyle="#5D8EDA";
ctx.fillRect(20,20,75,50);
// Turn transparency on
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
/*
globalAlpha = number ; (từ 0.0 đến 1.0)
*/
</script>

Xem Kết quả
Thiết lập độ trong suốt cho bản vẽ  
globalCompositeOperation
?
Xem ví dụ

<canvas id="demo-globalCompositeOperation" width="500" height="150"></canvas>

<script>
var c=document.getElementById("demo-globalCompositeOperation");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.fillStyle="blue";
ctx.globalCompositeOperation="source-over";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.fillStyle="blue";
ctx.globalCompositeOperation="destination-over";
ctx.fillRect(180,50,75,50);
</script>

Xem Kết quả
Tham khảo thêm các kiểu globalCompositeOperation khác:
Các kiểu cắt ghép hình  
Other    
save()
?
Đang trong giai đoạn nghiên cứu, chưa được ứng dụng rộng rãi
    
restore()
?
Đang trong giai đoạn nghiên cứu, chưa được ứng dụng rộng rãi
    
createEvent()
?
Đang trong giai đoạn nghiên cứu, chưa được ứng dụng rộng rãi
    
getContext()
?
Đang trong giai đoạn nghiên cứu, chưa được ứng dụng rộng rãi
    
toDataURL()
?
Đang trong giai đoạn nghiên cứu, chưa được ứng dụng rộng rãi
    

Phần dịch tiếng Việt chỉ mang tính chất tương đối và chưa chính xác, mong các bạn thông cảm và vui long comment để kiến thức hoàn thiện hơn. Cám ơn!
Xem tất cả thuộc tính của CSS
Thư góp ý
Thanks: ... | w3.org | w3schools .com
( 2013-04-08 14:44)
Chủ đề: