files/zh-cn/web/api/webgl_api/by_example/boilerplate_1/index.html


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

---
title: Boilerplate 1
slug: Web/API/WebGL_API/By_example/Boilerplate_1
translation_of: Web/API/WebGL_API/By_example/Boilerplate_1
---
<div>{{IncludeSubnav("/en-US/Learn")}}</div>

<p>{{PreviousNext("Learn/WebGL/By_example/Canvas_size_and_WebGL","Learn/WebGL/By_example/Scissor_animation")}}</p>

<div id="boilerplate-1">
<div class="summary">
<p>这个例子描述了从现在开始将要隐藏重复的代码片断,以及定义一个JavaScript函数复用以简化WebGL初始化。</p>
</div>

<p>{{EmbedLiveSample("boilerplate-1-source",660,400)}}</p>

<div id="boilerplate-1-intro">
<h3 id="用于设置WebGL呈现上下文的复用代码">用于设置WebGL呈现上下文的复用代码</h3>

<p>现在你很习惯看到相同的{{Glossary("HTML")}}, {{Glossary("CSS")}}和{{Glossary("JavaScript")}}重复一遍又一遍。所以我们从现在起要隐藏他们。这将使我们能够专注于代码最有趣的部分相关学习{{Glossary("WebGL")}}。</p>

<p>特别是，在HTML的{{HTMLElement("p")}}元素包含一些描述性的文本页面也可以是错误消息；一个{{HTMLElement("canvas")}} 元素;和一个可选的{{HTMLElement("button")}}。CSS规则包含<code>body</code>, <code>canvas</code>, 和<code>button</code>。任何额外的冗余的CSS和HTML将不会显示在页面的具体的例子。</p>

<p>在以下示例中,我们将使用一个JavaScript函数功能,<code>getRenderingContext()</code> ，来初始化{{domxref("WebGLRenderingContext","WebGL rendering context", "", 1)}}。现在,您应该能够了解什么功能。基本上,它得到了WebGL从画布元素，渲染上下文初始化绘图缓冲区，清除它黑色，并返回初始化上下文。在错误的情况下，它会显示一个错误消息，并返回 {{jsxref("null")}}。</p>

<p>最后,所有JavaScript代码将运行在一个直接的函数,这是一种常见的JavaScript技术(see {{Glossary("Function")}})。函数声明和调用也将被隐藏。</p>
</div>

<div id="boilerplate-1-source">
<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;[ Some descriptive text about the example. ]&lt;/p&gt;
&lt;button&gt;[ Optional button element. ]&lt;/button&gt;
&lt;canvas&gt;Your browser does not seem to support
    HTML5 canvas.&lt;/canvas&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">body {
  text-align : center;
}
canvas {
  display : block;
  width : 280px;
  height : 210px;
  margin : auto;
  padding : 0;
  border : none;
  background-color : black;
}
button {
  display : block;
  font-size : inherit;
  margin : auto;
  padding : 0.6em;
}
</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">function getRenderingContext() {
  var canvas = document.querySelector("canvas");
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  var gl = canvas.getContext("webgl")
    || canvas.getContext("experimental-webgl");
  if (!gl) {
    var paragraph = document.querySelector("p");
    paragraph.innerHTML = "Failed to get WebGL context."
      + "Your browser or device may not support WebGL.";
    return null;
  }
  gl.viewport(0, 0,
    gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  return gl;
}
</pre>

<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/boilerplate-1">GitHub</a>.</p>
</div>
</div>

<p>{{PreviousNext("Learn/WebGL/By_example/Canvas_size_and_WebGL","Learn/WebGL/By_example/Scissor_animation")}}</p>