SHARE
TWEET

Untitled

a guest Mar 24th, 2019 56 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3.  
  4. <head>
  5.   <meta charset="utf-8" />
  6.   <title>Canvas tutorial template</title>
  7.   <script type="text/javascript">
  8.     const WIDTH = 800;
  9.     const HEIGHT = 800;
  10.     const PI_2 = Math.PI * 2;
  11.     var ctx;
  12.     var Ball = function(speedX, speedY, locationX, locationY, radius, red, green, blue) {
  13.       this.speedX = speedX;
  14.       this.speedY = speedY;
  15.       this.locationX = locationX;
  16.       this.locationY = locationY;
  17.       this.radius = radius;
  18.       this.red = red;
  19.       this.green = green;
  20.       this.blue = blue;
  21.     }
  22.  
  23.     function createBall() {
  24.       var canvas = document.getElementById('tutorial');
  25.       if (canvas.getContext) {
  26.         ctx = canvas.getContext('2d');
  27.         let ball = new Ball(
  28.           Math.random() * 8.0 - 4.0,
  29.           Math.random() * 8.0 - 4.0,
  30.           WIDTH / 2,
  31.           HEIGHT / 2,
  32.           Math.random() * 45.0 + 1.0,
  33.           Math.floor(Math.random() * 96),
  34.           Math.floor(Math.random() * 96),
  35.           Math.floor(Math.random() * 96)
  36.         );
  37.  
  38.         ctx.beginPath();
  39.         ctx.fillStyle = 'rgb(' + ball.red + ',' + ball.green + ',' + ball.blue + ')';
  40.         ctx.arc(ball.locationX, ball.locationY, ball.radius, 0, PI_2, true);
  41.         ctx.fill();
  42.       }
  43.     }
  44.   </script>
  45.   <style type="text/css">
  46.     canvas {
  47.       background-color: #000;
  48.       border: 1px solid #999;
  49.     }
  50.   </style>
  51. </head>
  52.  
  53. <body onclick="createBall();">
  54.   <canvas id="tutorial" width="800" height="800"></canvas>
  55. </body>
  56.  
  57. </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