SHARE
TWEET

Untitled

a guest Mar 18th, 2019 55 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>CPSC 424, Lab 2, Exercise 1</title>
  8. <style>
  9.     /* This style section is here to make the canvas more obvious on the
  10.        page.  It is white on a light gray page background, with a thin
  11.        black border. */
  12.     body {
  13.         background-color: #DDDDDD;
  14.     }
  15.     canvas {
  16.         background-color: white;
  17.         display: block;
  18.     }
  19.     #canvasholder {
  20.         border:2px solid black;
  21.         float: left; /* This makes the border exactly fit the canvas. */
  22.     }
  23. </style>
  24. <script>
  25.  
  26.     "use strict";  // gives improved error-checking in scripts.
  27.  
  28.     var canvas;    // The canvas element on which we will draw.
  29.     var graphics;  // A 2D graphics context for drawing on the canvas.
  30.     var pixelSize; // The size of a pixel in the coordinate system; set up by
  31.                    //    applyWindowToViewportTransform function when it is called.
  32.    
  33.     /**
  34.      *  The draw() function is called by init() after the page loads,
  35.      *  to draw the content of the canvas.  At the start, clear the canvas
  36.      *  and save a copy of the state; restore the state at the end.  (These
  37.      *  actions are not necessary in this program, since the function will
  38.      *  only be called once.)
  39.      */
  40.     function draw() {
  41.    
  42.     graphics.clearRect(0,0,600,600);
  43.        
  44.         // TODO: insert code to draw the image for Exercise 1!
  45.         //graphics.fillRect(100,100,200,100);
  46.         //graphics.strokeRect(100,100,300,200);
  47.         //graphics.fillText("hello",50,50);
  48.         //graphics.fillOval()
  49.         graphics.lineWidth = 5;
  50.         graphics.fillStyle= "blue";
  51.        
  52.         graphics.fillPoly(300,0, 600,250, 450,575, 150,575, 0,250); //Kształt
  53.         graphics.strokePoly(300,0, 600,250, 450,575, 150,575, 0,250); //Obrys
  54.        
  55.        
  56.  
  57.        
  58.        
  59.        
  60.         graphics.fillStyle = "black"; //Usta
  61.         graphics.fillOval(300,350,130,150);
  62.        
  63.        
  64.        
  65.         graphics.fillStyle = "white"; //Zęby
  66.        
  67.         graphics.fillPoly(260,440,300,440,300,495,265,490);
  68.         graphics.fillPoly(300,440,340,440,340,490,305,495);
  69.        
  70.        
  71.         graphics.fillStyle = "blue"; //Przykrycie ust
  72.         graphics.fillOval(300,350,130,110);
  73.         graphics.fillOval(300,280,150,130);
  74.        
  75.        
  76.        
  77.         graphics.fillStyle = "white"; //Oczy
  78.         graphics.fillCircle(200,200,60);
  79.         graphics.fillCircle(400,200,60);
  80.        
  81.         graphics.fillStyle = "black";
  82.         graphics.fillCircle(200,195,45);
  83.         graphics.fillCircle(400,195,45);
  84.        
  85.         graphics.fillStyle = "white";
  86.         graphics.fillCircle(180,180,15);
  87.         graphics.fillCircle(380,180,15);
  88.        
  89.    
  90.         graphics.fillStyle = "black"; //lewy policzek
  91.         graphics.fillOval(192,415,30,30);
  92.         graphics.fillStyle = "blue";
  93.         graphics.fillOval(185,400,38,42);
  94.        
  95.         graphics.fillStyle = "black";//prawy policzek
  96.         graphics.fillOval(428,415,30,30);
  97.         graphics.fillStyle = "blue";
  98.         graphics.fillOval(438,400,38,45);
  99.        
  100.    
  101.        
  102.        
  103.        
  104.        
  105.        
  106.     } // end of draw()
  107.    
  108.    
  109.     /**
  110.      * Sets up a transformation in the graphics context so that the canvas will
  111.      * show x-values in the range from left to right, and y-values in the range
  112.      * from bottom to top.  If preserveAspect is true, then one of the ranges
  113.      * will be increased, if necessary, to account for the aspect ratio of the
  114.      * canvas.  This function sets the global variable pixelsize to be the
  115.      * size of a pixel in the new coordinate system.  (If preseverAspect is
  116.      * true, pixelSize is the maximum of its horizontal and vertical sizes.)
  117.      */
  118.     function applyWindowToViewportTransformation(left,right,bottom,top,preserveAspect) {
  119.         var displayAspect, windowAspect;
  120.         var excess;
  121.         var pixelwidth, pixelheight;
  122.         if (preserveAspect) {
  123.             // Adjust the limits to match the aspect ratio of the drawing area.
  124.             displayAspect = Math.abs(canvas.height / canvas.width);
  125.             windowAspect = Math.abs(( top-bottom ) / ( right-left ));
  126.             if (displayAspect > windowAspect) {
  127.                 // Expand the viewport vertically.
  128.                 excess = (top-bottom) * (displayAspect/windowAspect - 1);
  129.                 top = top + excess/2;
  130.                 bottom = bottom - excess/2;
  131.             }
  132.             else if (displayAspect < windowAspect) {
  133.                 // Expand the viewport vertically.
  134.                 excess = (right-left) * (windowAspect/displayAspect - 1);
  135.                 right = right + excess/2;
  136.                 left = left - excess/2;
  137.             }
  138.         }
  139.         graphics.scale( canvas.width / (right-left), canvas.height / (bottom-top) );
  140.         graphics.translate( -left, -top );
  141.         pixelwidth =  Math.abs(( right - left ) / canvas.width);
  142.         pixelheight = Math.abs(( bottom - top ) / canvas.height);
  143.         pixelSize = Math.max(pixelwidth,pixelheight);
  144.     }  // end of applyWindowToViewportTransformation()
  145.  
  146.  
  147.     /**
  148.      * This function can be called to add a collection of extra drawing function to
  149.      * a graphics context, to make it easier to draw basic shapes with that context.
  150.      * The parameter, graphics, must be a canvas 2d graphics context.
  151.      *
  152.      * The following new functions are added to the graphics context:
  153.      *
  154.      *    graphics.strokeLine(x1,y1,x2,y2) -- stroke the line from (x1,y1) to (x2,y2).
  155.      *    graphics.fillCircle(x,y,r) -- fill the circle with center (x,y) and radius r.
  156.      *    graphics.strokeCircle(x,y,r) -- stroke the circle.
  157.      *    graphics.fillOval(x,y,r1,r2) -- fill oval with center (x,y) and radii r1 and r2.
  158.      *    graphics.stokeOval(x,y,r1,r2) -- stroke the oval
  159.      *    graphics.fillPoly(x1,y1,x2,y2,...) -- fill polygon with vertices (x1,y1), (x2,y2), ...
  160.      *    graphics.strokePoly(x1,y1,x2,y2,...) -- stroke the polygon.
  161.      *    graphics.getRGB(x,y) -- returns the color components of pixel at (x,y) as an array of
  162.      *         four integers in the range 0 to 255, in the order red, green, blue, alpha.
  163.      *
  164.      * (Note that "this" in a function that is called as a member of an object refers to that
  165.      * object.  Here, this will refer to the graphics context.)
  166.      */
  167.     function addGraphicsContextExtras(graphics) {
  168.         graphics.strokeLine = function(x1,y1,x2,y2) {
  169.            this.beginPath();
  170.            this.moveTo(x1,y1);
  171.            this.lineTo(x2,y2);
  172.            this.stroke();
  173.         }
  174.         graphics.fillCircle = function(x,y,r) {
  175.            this.beginPath();
  176.            this.arc(x,y,r,0,2*Math.PI,false);
  177.            this.fill();
  178.         }
  179.         graphics.strokeCircle = function(x,y,radius) {
  180.            this.beginPath();
  181.            this.arc(x,y,radius,0,2*Math.PI,false);
  182.            this.stroke();
  183.         }
  184.         graphics.fillPoly = function() {
  185.             if (arguments.length < 6)
  186.                return;
  187.             this.beginPath();
  188.             this.moveTo(arguments[0],arguments[1]);
  189.             for (var i = 2; i+1 < arguments.length; i = i + 2) {
  190.                this.lineTo(arguments[i],arguments[i+1]);
  191.             }
  192.             this.closePath();
  193.             this.fill();
  194.         }
  195.         graphics.strokePoly = function() {
  196.             if (arguments.length < 4)
  197.                return;
  198.             this.beginPath();
  199.             this.moveTo(arguments[0],arguments[1]);
  200.             for (var i = 2; i+1 < arguments.length; i = i + 2) {
  201.                this.lineTo(arguments[i],arguments[i+1]);
  202.             }
  203.             this.closePath();
  204.             this.stroke();
  205.         }
  206.         graphics.fillOval = function(x,y,horizontalRadius,verticalRadius) {
  207.            this.save();
  208.            this.translate(x,y);
  209.            this.scale(horizontalRadius,verticalRadius);
  210.            this.beginPath();
  211.            this.arc(0,0,1,0,2*Math.PI,false);
  212.            this.restore();
  213.            this.fill();
  214.         }
  215.         graphics.strokeOval = function(x,y,horizontalRadius,verticalRadius) {
  216.            this.save();
  217.            this.translate(x,y);
  218.            this.scale(horizontalRadius,verticalRadius);
  219.            this.beginPath();
  220.            this.arc(0,0,1,0,2*Math.PI,false);
  221.            this.restore();
  222.            this.stroke();
  223.         }
  224.         graphics.getRGB = function(x,y) {
  225.             var color = this.getImageData(x,y,1,1);
  226.             return color.data;
  227.         }
  228.     }    // end of addGraphicsContextExtras()
  229.    
  230.     /**
  231.      * The init() funciton is called after the page has been
  232.      * loaded.  It initializes the canvas and graphics variables.
  233.      * It calles addGraphicsContextExtras(graphics) to add the extra
  234.      * drawing functions to the graphics context, and it calls draw()
  235.      * to draw on the canvas.
  236.      */
  237.     function init() {
  238.         try {
  239.             canvas = document.getElementById("canvas");
  240.             graphics = canvas.getContext("2d");
  241.         } catch(e) {
  242.             document.getElementById("canvasholder").innerHTML =
  243.                "Canvas graphics is not supported.<br>" +
  244.                "An error occurred while initializing graphics.";
  245.         }
  246.         addGraphicsContextExtras(graphics);
  247.         draw();  // Call draw() to draw on the canvas.
  248.     }
  249.    
  250. </script>
  251. </head>
  252. <body onload="init()"> <!-- the onload attribute here is what calls the init() function -->
  253.  
  254. <h2>CS 424, Lab 2, Exercise 1</h2>
  255.  
  256. <noscript>
  257.     <!-- This message will be shown in the page if JavaScript is not available. -->
  258. <p>JavaScript is required to use this page.</p>
  259. </noscript>
  260.  
  261. <div id="canvasholder">
  262. <canvas id="canvas" width="600" height="600">
  263.     <!-- This message is shown on the page if the browser doesn't support the canvas element. -->
  264. Canvas not supported.
  265. </canvas>
  266. </div>
  267.  
  268. </body>
  269. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top