---
title: Clearing by clicking
slug: Web/API/WebGL_API/By_example/Clearing_by_clicking
translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking
---
<div>{{IncludeSubnav("/en-US/Learn")}}</div>

<p>{{PreviousNext("Learn/WebGL/By_example/Clearing_with_colors","Learn/WebGL/By_example/Simple_color_animation")}}</p>

<div id="clearing-by-clicking">
<div class="summary">
<p><span class="seoSummary">此示例演示了如何通过用户单击时用随机颜色渲染上下文来将用户交互与WebGL图形操作结合起来。</span></p>
</div>

<p>{{EmbedLiveSample("clearing-by-clicking-source",660,425)}}</p>

<div id="clearing-by-clicking-intro">
<h3 id="用随机颜色渲染上下文">用随机颜色渲染上下文</h3>

<p>这个例子提供了一个简单的例子，说明如何结合 {{Glossary("WebGL")}} 和用户交互。每次用户点击画布或按钮时，画布都会使用一种新的随机色。</p>

<p>注意我们如何在事件处理函数中嵌入 {{Glossary("WebGL")}} 函数调用。</p>
</div>

<div id="clearing-by-clicking-source">
<pre class="brush: html">&lt;p&gt;A very simple WebGL program that still shows some color and
    user interaction.&lt;/p&gt;
&lt;p&gt;You can repeatedly click the empty canvas or the button below
    to change color.&lt;/p&gt;
&lt;canvas id="canvas-view"&gt;Your browser does not seem to support
    HTML5 canvas.&lt;/canvas&gt;
&lt;button id="color-switcher"&gt;Press here to switch color&lt;/button&gt;
</pre>

<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 : inline-block;
  font-size : inherit;
  margin : auto;
  padding : 0.6em;
}
</pre>

<pre class="brush: js">window.addEventListener("load", function setupWebGL (evt) {
  "use strict"

  // Cleaning after ourselves. The event handler removes
  // itself, because it only needs to run once.
  window.removeEventListener(evt.type, setupWebGL, false);

  // 给 canvas 和 button 添加相同的时间处理器
  var canvas = document.querySelector("#canvas-view");
  var button = document.querySelector("#color-switcher");
  canvas.addEventListener("click", switchColor, false);
  button.addEventListener("click", switchColor, false);

  // 存放 WebGLRenderingContext 的变量
  var gl;

  // 点击事件处理器
  function switchColor () {
    // Referring to the externally defined gl variable.
    // If undefined, try to obtain the WebGLRenderingContext.
    // If failed, alert user of failure.
    // Otherwise, initialize the drawing buffer (the viewport).
    if (!gl) {
      gl = canvas.getContext("webgl")
        || canvas.getContext("experimental-webgl");
      if (!gl) {
        alert("Failed to get WebGL context.\n"
          + "Your browser or device may not support WebGL.");
        return;
      }
      gl.viewport(0, 0,
        gl.drawingBufferWidth, gl.drawingBufferHeight);
    }
    // 使用辅助函数获取一种随机色
    var color = getRandomColor();
    // 用随机色设置底色
    gl.clearColor(color[0], color[1], color[2], 1.0);
    // Clear the context with the newly set color. This is
    // the function call that actually does the drawing.
    gl.clear(gl.COLOR_BUFFER_BIT);
  }

  // 随机颜色辅助函数
  function getRandomColor() {
    return [Math.random(), Math.random(), Math.random()];
  }

}, false);
</pre>

<p>这个例子的代码可以在  <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking">GitHub</a> 上下载。</p>
</div>
</div>

<p>{{PreviousNext("Learn/WebGL/By_example/Clearing_with_colors","Learn/WebGL/By_example/Simple_color_animation")}}</p>