SHARE
TWEET

Untitled

a guest Nov 14th, 2017 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>zadanie5</title>
  5. <script type="application/javascript">
  6. function draw() {
  7.     var canvas = document.getElementById("canvas");
  8.     var x = Number(document.getElementById("x").value);
  9.     var y = Number(document.getElementById("y").value);
  10.     var r = Number(document.getElementById("r").value);
  11.     if(x < 1 || x >= 800) {
  12.         alert("x musi sie miescic na ekranie rysowania 800x600");
  13.         return;
  14.     }
  15.      if(y < 1 || y >= 600) {
  16.         alert("y musi sie miescic na ekranie rysowania 800x600");
  17.         return;
  18.     }
  19.     if(x - r <= 0) {
  20.         r = x;
  21.      }
  22.     if(y - r <= 0) {
  23.             r = y;
  24.      }
  25.     if(x + r >= 800) {
  26.         r = 800 - x;
  27.      }
  28.     if(y + r >= 800) {
  29.            r = 800 - y;
  30.      }
  31.      var ctx = canvas.getContext("2d");
  32.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  33.         ctx.beginPath();
  34.         ctx.arc(x, y, r, 0, 2 * Math.PI);
  35.     ctx.lineWidth = 1;
  36.         ctx.strokeStyle = "red";
  37.         ctx.stroke();
  38.  
  39.     document.getElementById("svg").innerHTML = "<circle cx='" + x + "' cy='" + y + "' r='" + r + "' style='fill: blue;' />";
  40. }
  41. </script>
  42. </head>
  43. <body>
  44.         x:<input type="text" id="x" /><br>
  45.         y:<input type="text" id="y" /><br>
  46.         r:<input type="text" id="r" /><br>
  47.         <button onclick="draw();">draw</button><br><hr>
  48.         <div>
  49.         <div style= "border: 2px solid black; float:left; height: 600px; width: 800px">
  50.                                 <canvas id="canvas" width="800" height="600"></canvas>
  51. <text>canvas</text>
  52.      </div> <div style= "border: 2px solid black; float:right; height: 600px; width: 800px">
  53.                    <svg id="svg" width="800" height="600">
  54.  
  55.                                 </svg>
  56. <text>SVG</text>
  57.  
  58.                                  </div>
  59. </div>
  60. </body>
  61. </html>
RAW Paste Data
Top