Output
canvas.png

ASPX Page
<head runat="server">
    <title>Canvas</title>
    <script type="text/javascript" src="excanvas-compressed.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
		<axial:Canvas Width="300" Height="300" runat="server" ID="canvas"></axial:Canvas>
		<axial:WFStartupScript runat="server" MethodName="Start" />
    </div>
    </form>
</body>


Codebehind
public partial class Canvas : System.Web.UI.Page
{
	int i;
	int interval;

	public void Start()
	{
		i = 0;
		Draw();
		interval = Window.SetInterval(() => Draw(), 1000);
	}

	public void Draw()
	{
		++i;
		CanvasContext ctx = canvas.GetContext("2d");
		ctx.ClearRect(0, 0, 300, 300);
		// note that all other translates are relative to this one
		ctx.Save();
		ctx.Translate(45, 45);

		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();

		ctx.Restore();

		Axial.DOM.Image dogImage = new Axial.DOM.Image();
		dogImage.Src = "dog.gif";
		ctx.Save();
		ctx.Translate(284 - i, 35);
		ctx.DrawImage(dogImage, 0, 0);
		ctx.Restore();
	}

	public void DrawBowtie(CanvasContext ctx, string 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();
	}

	public void Dot(CanvasContext ctx)
	{
		ctx.Save();
		ctx.FillStyle = "black";
		ctx.FillRect(-2, -2, 4, 4);
		ctx.Restore();
	}
}

Last edited Aug 27, 2008 at 8:58 PM by thasmin, version 1

Comments

No comments yet.