Phương thức Rotate() trong HTML5 Canvas

Trang trước
Trang sau  

HTML5 canvas cung cấp phương thức rotate(angle) được sử dụng để quay canvas xung quanh điểm ban đầu hiện tại.

Phương thức này chỉ nhận một tham số và nó là góc mà canvas được quay. Đây là phương thức quay theo chiều kim đồng hồ trong Radian.

Ví dụ

Sau đây là ví dụ chúng tôi đang chạy hai vòng lặp, trong đó vòng lặp đầu tiên quyết định số vòng quay, vòng lặp thứ hai quyết định số dấu chấm được vẽ trong mỗi vòng.

<!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.translate(100,100);
    for (i=1; i<7; i++){
       ctx.save();
       ctx.fillStyle = 'rgb('+(51*i)+','+(200-51*i)+',0)';
       for (j=0; j < i*6; j++){
          ctx.rotate(Math.PI*2/(i*6));
          ctx.beginPath();
          ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
          ctx.fill();
       }
       ctx.restore();
     }
  }else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}
</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 Rotation

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