html5的canvas对象的translate方法和rotate方法

来源：互联网发布：js如何创建二维数组编辑：程序博客网时间：2024/05/22 06:20

下午读一个HTML5的源代码的时候，遇到canvas对象的translate方法和rotate方法，发现不是很了解，花了点时间研究下，原来如此简单，虽然简单，还是记录一下吧，毕竟是自己的成果，呵呵！

1. translate(80,80)的意思就是说以x=80，y=80的这个像素点作为(0,0)坐标，以后的坐标都是相对于这个标准的。

2. rotate（90 * Math.PI / 180）按顺时针旋转90度。

一、源代码如下：

   <!DOCTYPE HTML>
<html>
<head>
<script language="javascript">
function drawBowtie(ctx, fillStyle) {
   ctx.fillStyle = "rgba(200,200,200,0.3)";
   ctx.fillRect(-30, -30, 60, 60);
   ctx.fillStyle = fillStyle;
   ctx.globalAlpha = 1.0;
   ctx.beginPath();
   ctx.moveTo(25, 25);
   ctx.lineTo(-25, -25);
   ctx.lineTo(25, -25);
   ctx.lineTo(-25, 25);
   ctx.closePath();
   ctx.fill();
}

function dot(ctx) {
   ctx.save();
   ctx.fillStyle = "black";
   ctx.fillRect(-2, -2, 4, 4);
   ctx.restore();
}

function draw() {
  var ctx = document.getElementById('myCanvas').getContext("2d");
   // note that all other translates are relative to this
   // one
  ctx.translate(100, 100);

   ctx.save();
  //ctx.translate(0, 0); // unnecessary
   drawBowtie(ctx, "red");
   dot(ctx);
   ctx.restore();

   ctx.save();
   ctx.translate(85, 0);
   ctx.rotate(45 * Math.PI / 180);
   drawBowtie(ctx, "green");
   dot(ctx);
   ctx.restore();

   ctx.save();
   ctx.translate(0, 85);
   ctx.rotate(135 * Math.PI / 180);
   drawBowtie(ctx, "blue");
   dot(ctx);
   ctx.restore();

   ctx.save();
   ctx.translate(85, 85);
   ctx.rotate(90 * Math.PI / 180);
   drawBowtie(ctx, "yellow");
   dot(ctx);
   ctx.restore();
}
window.onload=function(){
  draw();
}
</script>
</head>
<body>
<div id="pw_body" style="width:100%;height:100%">
   <canvas id="myCanvas" width="300" height="300"></canvas>
   <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </div>
</body>
</html>

二、效果图：