Code Snippet
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width" />
- <title>Box Fractal</title>
- <link href="/Content/site.css" rel="stylesheet"/>
- <script src="/Scripts/modernizr-2.5.3.js"></script>
- <script src="/Scripts/jquery-1.7.1.js"></script>
- </head>
- <body>
- <h2>Box Fractal</h2>
- <canvas id="myCanvas" width="1600px" height="1200px" style="border:1px solid #d3d3d3;">
- Your browser does not support the HTML5 canvas tag.
- </canvas>
- <script type="text/javascript">
- function Point(X,Y) {
- this.X = X;
- this.Y = Y;
- };
- function resizeFrame() {
- var h = $(window).height();
- var w = $(window).width();
- $("#myCanvas").css('height', h - 100);
- $("#myCanvas").css('width', w - 50);
- }
- function canvas() {
- this.height = $(window).height();
- this.width = $(window).width();
- }
- $(document).ready(function () {
- jQuery.event.add(window, "load", resizeFrame);
- jQuery.event.add(window, "resize", resizeFrame);
- var color = "red";
- var backgroundColor = "white";
- var lineWidth = 1;
- var precision = 1;
- var third = 0.333333;
- var g = document.getElementById("myCanvas");
- var ctx = g.getContext("2d");
- width = g.width;
- height = g.height;
- ctx.fillStyle = color;
- ctx.lineWidth = lineWidth;
- //ctx.beginPath();
- draw(width, height);
- //ctx.stroke();
- function draw(width, height) {
- //Draw initial block
- var upperLeft = new Point(0, 0);
- ctx.fillRect(upperLeft.X, upperLeft.Y, width, height);
- ctx.fillStyle = backgroundColor;
- drawBox(upperLeft, width, height);
- }
- function drawBox(upperLeft, width, height) {
- if (width * third > precision) {
- var top = new Point(upperLeft.X + width * third, upperLeft.Y);
- var left = new Point(upperLeft.X, upperLeft.Y + height * third);
- var right = new Point(upperLeft.X + 2 * width * third, upperLeft.Y + height * third);
- var bottom = new Point(upperLeft.X + width * third, upperLeft.Y + 2 * height * third);
- //Remove 4 squares
- ctx.fillRect(top.X, top.Y, width * third, height * third);
- ctx.fillRect(left.X, left.Y, width * third, height * third);
- ctx.fillRect(right.X, right.Y, width * third, height * third);
- ctx.fillRect(bottom.X, bottom.Y, width * third, height * third);
- //upperleft box
- drawBox(upperLeft, width * third, height * third);
- //upperright box
- drawBox(new Point(upperLeft.X + 2 * width * third, upperLeft.Y), width * third, height * third);
- //middle box
- drawBox(new Point(upperLeft.X + width * third, upperLeft.Y + height * third), width * third, height * third);
- //lowerleft box
- drawBox(new Point(upperLeft.X, upperLeft.Y + 2 * height * third), width * third, height * third);
- //lowerright box
- drawBox(new Point(upperLeft.X + 2 * width * third, upperLeft.Y + 2 * height * third), width * third, height * third);
- }
- }
- });
- </script>
- </body>
- </html>
