Advertisement
lemansky

Untitled

Nov 29th, 2022
1,341
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.33 KB | None | 0 0
  1. function draw() {
  2.   const canvas = document.getElementById('canvas');
  3.   if (canvas.getContext) {
  4.     const ctx = canvas.getContext('2d');
  5.  
  6.     roundedRect(ctx, 12, 12, 150, 150, 15);
  7.     roundedRect(ctx, 19, 19, 150, 150, 9);
  8.     roundedRect(ctx, 53, 53, 49, 33, 10);
  9.     roundedRect(ctx, 53, 119, 49, 16, 6);
  10.     roundedRect(ctx, 135, 53, 49, 33, 10);
  11.     roundedRect(ctx, 135, 119, 25, 49, 10);
  12.  
  13.     ctx.beginPath();
  14.     ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
  15.     ctx.lineTo(31, 37);
  16.     ctx.fill();
  17.  
  18.     for (let i = 0; i < 8; i++) {
  19.      ctx.fillRect(51 + i * 16, 35, 4, 4);
  20.    }
  21.  
  22.    for (let i = 0; i < 6; i++) {
  23.      ctx.fillRect(115, 51 + i * 16, 4, 4);
  24.    }
  25.  
  26.    for (let i = 0; i < 8; i++) {
  27.      ctx.fillRect(51 + i * 16, 99, 4, 4);
  28.    }
  29.  
  30.    ctx.beginPath();
  31.    ctx.moveTo(83, 116);
  32.    ctx.lineTo(83, 102);
  33.    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
  34.    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
  35.    ctx.lineTo(111, 116);
  36.    ctx.lineTo(106.333, 111.333);
  37.    ctx.lineTo(101.666, 116);
  38.    ctx.lineTo(97, 111.333);
  39.    ctx.lineTo(92.333, 116);
  40.    ctx.lineTo(87.666, 111.333);
  41.    ctx.lineTo(83, 116);
  42.    ctx.fill();
  43.  
  44.    ctx.fillStyle = 'white';
  45.    ctx.beginPath();
  46.    ctx.moveTo(91, 96);
  47.    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
  48.    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
  49.    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
  50.    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
  51.    ctx.moveTo(103, 96);
  52.    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
  53.    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
  54.    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
  55.    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
  56.    ctx.fill();
  57.  
  58.    ctx.fillStyle = 'black';
  59.    ctx.beginPath();
  60.    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
  61.    ctx.fill();
  62.  
  63.    ctx.beginPath();
  64.    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
  65.    ctx.fill();
  66.  }
  67. }
  68.  
  69. // A utility function to draw a rectangle with rounded corners.
  70.  
  71. function roundedRect(ctx, x, y, width, height, radius) {
  72.  ctx.beginPath();
  73.  ctx.moveTo(x, y + radius);
  74.  ctx.arcTo(x, y + height, x + radius, y + height, radius);
  75.  ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
  76.  ctx.arcTo(x + width, y, x + width - radius, y, radius);
  77.  ctx.arcTo(x, y, x, y + radius, radius);
  78.  ctx.stroke();
  79. }
  80.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement