Microsoft Word phuong thuc scale trong html5 canvas docx http //vietjack com/html5/index jsp Copyright © vietjack com http //vietjack com/ Trang chia sẻ các bài học online miễn phí Phương thức Scale t[.]
Trang 1Phương thức Scale trong HTML5 Canvas
HTML5 canvas cung cấp phương thức scale(x,y) được sử dụng để tăng hoặc giảm đơn vị
trong grid của chúng ta Điều này được sử dụng để vẽ các hình với tỷ lệ giảm hoặc tăng
Phương thức này nhận hai tham số, với x là thừa số scale trong hướng ngang và y là thừa
số scale trong hướng dọc Cả hai tham số phải là số khẳng định
Các giá trị nhở hơn 1.0 giảm kích cỡ đơn vị và các giá trị lớn hơn 1.0 tăng kích cỡ đơn vị
Thiết lập các thừa số scale về 1.0 không ảnh hưởng tới kích cỡ đơn vị
Ví dụ
Sau đây là ví dụ đơn giản sử dụng hàm spirograph để vẽ 9 hình với các thừa số scale khác
nhau:
<!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.strokeStyle = "#fc0"; ctx.lineWidth = 1.5;
ctx.fillRect( , ,300,300); // Uniform scaling ctx.save() ctx.translate(50,50); drawSpirograph(ctx,22, , ); ctx.translate(100, ); ctx.scale(0.75,0.75); drawSpirograph(ctx,22, , ); ctx.translate(133.333, ); ctx.scale(0.75,0.75);
drawSpirograph(ctx,22, , ); ctx.restore(); // Non uniform
scaling (y direction) ctx.strokeStyle = "#0cf"; ctx.save()
ctx.translate(50,150); ctx.scale( ,0.75);
drawSpirograph(ctx,22, , ); ctx.translate(100, );
ctx.scale( ,0.75); drawSpirograph(ctx,22, , );
ctx.translate(100, ); ctx.scale( ,0.75);
drawSpirograph(ctx,22, , ); ctx.restore(); // Non uniform
scaling (x direction) ctx.strokeStyle = "#cf0"; ctx.save()
ctx.translate(50,250); ctx.scale(0.75, );
drawSpirograph(ctx,22, , ); ctx.translate(133.333, );
ctx.scale(0.75, ); drawSpirograph(ctx,22, , );
ctx.translate(177.777, ); ctx.scale(0.75, );
drawSpirograph(ctx,22, , ); ctx.restore(); }else
alert('You need Safari or Firefox 1.5+ to see this demo.'); } } function
drawSpirograph(ctx, , , ){ var x1 = R- ; var y1 = 0 var i = 1
ctx.beginPath(); ctx.moveTo(x1,y1); do if i 20000) break; var x2
= ( + )*Math.cos( *Math.PI/72) -
( + )*Math.cos(((R r)/r)*(i Math.PI/72)) var y2 =
( + )*Math.sin( *Math.PI/72) -
( + )*Math.sin(((R r)/r)*(i Math.PI/72)) ctx.lineTo(x2,y2); x1 = x2;
y1 = y2; i++; } while x2 != R-O && y2 != ); ctx.stroke();
</script> </head> <body onload= drawShape();" <canvas id="mycanvas"
width="400" height="400"></canvas> </body> </html>
Trang 2Ví dụ trên sẽ cho kết quả sau: