Phương thức Translate trong HTML5 Canvas

Trang trước
Trang sau  

HTML5 canvas cung cấp phương thức translate(x,y) được sử dụng để di chuyển canvas và điểm ban đầu của nó tới một điểm khác trong grid.

Ở đây, tham số x là số canvas được di chuyển tới bên trái hoặc phải, và y là số lượng để nó được di chuyển lên hoặc xuống.

Ví dụ

Sau đây là ví dụ sử dụng phương thức trên để vẽ Spirograph:

<!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.fillRect(0,0,300,300);
    for (i=0;i<3;i++) {
       for (j=0;j<3;j++) {
         ctx.save();
         ctx.strokeStyle = "#FF0066";
         ctx.translate(50+j*100,50+i*100);
         drawSpirograph(ctx,10*(j+3)/(j+2),-2*(i+3)/(i+1),10);
         ctx.restore();
       }
    }
  }else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}

function drawSpirograph(ctx,R,r,O){
  var x1 = R-O;
  var y1 = 0;
  var i  = 1;
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  do {
    if (i>20000) break;
    var x2 = (R+r)*Math.cos(i*Math.PI/72) - 
             (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
    var y2 = (R+r)*Math.sin(i*Math.PI/72) - 
             (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
    ctx.lineTo(x2,y2);
    x1 = x2;
    y1 = y2;
    i++;
  } while (x2 != R-O && y2 != 0 );
  ctx.stroke();
}
</script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>
Quảng cáo

Ví dụ trên sẽ cho kết quả sau:

Canvas Translation

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

Tạo đề, số hóa đề thi từ PDF/Word/Excel Nhập đề nhanh, trích xuất nội dung tự động. Trộn đề thành nhiều mã, Download/In đề thi offline Tạo nhiều mã đề khác nhau, xuất file hoặc in dễ dàng. Quản lý lớp học Theo dõi học sinh, điểm số và kết quả học tập trực quan. Giao bài tập, tổ chức thi kiểm tra trực tuyến Giao bài, chấm điểm và thống kê kết quả ngay trên hệ thống.
Khám phá công cụ
Trang trước
Trang sau  
canvas_trong_html5.jsp
Bài viết liên quan