html5Practice/graphics.html at main · Sofianct/html5Practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="assets/html5.png" type="image/x-icon">
    <title>Graphics</title>
    <link rel="stylesheet" href="./assets/style.css" />
  </head>
  <body>
    <a href="index.html">
      <button>BACK</button>
    </a>
    <article>
      <header>
        <h1>The Graphics elements</h1>
        <h2>&lt;canvas&gt;</h2>
        <p>
          Use the HTML <code>&lt;canvas&gt;</code> element with either the
          canvas scripting API or the WebGL API to draw graphics and
          animations.<br />
          Unlike the &lt;img&gt; element, the &lt;canvas&gt;element requires the
          closing tag (&lt;/canvas&gt;).
        </p>
      </header>

      <div class="atributes canvas">
        <div class="attribute height">
          <h3>Attributes</h3>
          <code><b>height</b></code>
          <p>
            The height of the coordinate space in CSS pixels. Defaults to 150.
          </p>
          <canvas height="50"> ></canvas><br />
          <code>&lt;canvas height="50"&gt;&lt;/canvas&gt;</code>
        </div>

        <div class="attribute width">
          <code><b>width</b></code>
          <p>
            The width of the coordinate space in CSS pixels. Defaults to 300.
          </p>
          <canvas height="50" width="50"> .</canvas><br />
          <code>&lt;canvas height="50" width="50" &gt;&lt;/canvas&gt;</code>
        </div>
      </div>

      <div class="attribute svg">
        <h2>&lt;svg&gt;</h2>
        <p>
          The <code>svg</code> element is a container that defines a new
          coordinate system and viewport. It is used as the outermost element of
          SVG documents, but it can also be used to embed an SVG fragment inside
          an SVG or HTML document.
        </p>
        <div class="svg-img">
          <p>Example:</p>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="svg-study"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M12 14l9-5-9-5-9 5 9 5z" />
            <path
              d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
            />
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
          /></svg><br>
          <code
            >&lt;svg xmlns="http://www.w3.org/2000/svg" class="svg-study"
            fill="none" viewBox="0 0 24 24" stroke="currentColor"
            stroke-width="2"><br />
            &lt;path d="M12 14l9-5-9-5-9 5 9 5z" /><br />
            &lt;path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952
            11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0
            01.665-6.479L12 14z" /><br />
            &lt;path stroke-linecap="round" stroke-linejoin="round" d="M12
            14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665
            6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998
            12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" /><br />
            &lt;/svg></code
          >
        </div>
      </div>
    </article>
    <a href="index.html">
      <button>BACK</button>
    </a>
  </body>
</html>