<!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.strokeText("2012",-15,5);
ctx.fill();
}
function dot(ctx)
{
ctx.save();
ctx.fillStyle = "black";
ctx.fillRect(-2, -2, 4, 4);
ctx.restore();
}
function draw()
{
var ctx =
document.getElementByIdx_x('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(100, 0);
ctx.rotate(90 * Math.PI / 180);
drawBowtie(ctx, "green");
dot(ctx);
ctx.restore();
ctx.save();
ctx.translate(0, 100);
ctx.rotate(135 * Math.PI / 180);
drawBowtie(ctx, "blue");
dot(ctx);
ctx.restore();
ctx.save();
ctx.translate(100, 100);
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>
效果图如下：
http://s10/middle/71261a2dgc166bc64ba59&690
加载中…
(2012-06-01 18:31:55)