initial commit

1 files changed, 163 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/element/mousemove_event/index.html b/files/zh-cn/web/api/element/mousemove_event/index.html
new file mode 100644
index 0000000000..afc2062ab1
--- /dev/null
+++ b/files/zh-cn/web/api/element/mousemove_event/index.html
@@ -0,0 +1,163 @@
+---
+title: mousemove
+slug: Web/API/Element/mousemove_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - NeedsSpecTable
+  - Reference
+translation_of: Web/API/Element/mousemove_event
+---
+<div>{{APIRef}}</div>
+
+<p><font face="Consolas, Liberation Mono, Courier, monospace">当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。</font></p>
+
+<h2 id="基本信息">基本信息</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">是否冒泡</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">是否可取消</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">接口</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">事件处理</th>
+   <td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="例子"><span style="">例子</span></h2>
+
+<p>下面的例子将使用 {{domxref("Element/mousedown_event", "mousedown")}}, <code>mousemove</code>, and {{domxref("Element/mouseup_event", "mouseup")}} 事件，实现一个允许用户在 HTML5 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API">canvas</a>绘图的功能。这个例子的功能很简单：线的粗细设置为1，颜色始终为黑色。</p>
+
+<p>当页面加载完成，我们使用变量 <code>myPics</code> 和<code>context</code>分别保存ID为<code>myPics</code>的DOM元素和接下来需要加工的的2d元素。</p>
+
+<p>当<code>mousedown</code>事件被触发时，绘图也开始了。首先，我们将鼠标的<code>x</code>坐标和<code>y</code>坐标分别赋值给变量<code>x</code>和<code>y</code>，然后设置<code>isDrawing</code>为<code>true</code>。</p>
+
+<p>当鼠标在页面上移动时，<code>mousemove</code>事件被触发。当<code>isDrawing</code>为true时，事件处理程序将会调用<code>drawLine</code>函数，该函数从变量<code>x</code>和<code>y</code>所指的位置开始，到现在鼠标所在的位置，画一条线。</p>
+
+<p>当<code>drawLine()</code>调用结束时，我们需要把坐标赋值到<code>x</code>和<code>y</code>中。</p>
+
+<p><code>mouseup</code>事件绘制图形的最后一段，并把<code>x</code>和<code>y</code>设置为0.通过设置isDra</p>
+
+<p><code>mouseup</code>事件绘制图形的最后一段，并把<code>x</code>和<code>y</code>设置为0.通过设置<code>isDrawing</code>为false，可以停止绘制。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Drawing with mouse events&lt;/h1&gt;
+&lt;canvas id="myPics" width="560" height="360"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">canvas {
+  border: 1px solid black;
+  width: 560px;
+  height: 360px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">// When true, moving the mouse draws on the canvas
+let isDrawing = false;
+let x = 0;
+let y = 0;
+
+const myPics = document.getElementById('myPics');
+const context = myPics.getContext('2d');
+
+// The x and y offset of the canvas from the edge of the page
+const rect = myPics.getBoundingClientRect();
+
+// Add the event listeners for mousedown, mousemove, and mouseup
+myPics.addEventListener('mousedown', e =&gt; {
+  x = e.clientX - rect.left;
+  y = e.clientY - rect.top;
+  isDrawing = true;
+});
+
+myPics.addEventListener('mousemove', e =&gt; {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = e.clientX - rect.left;
+    y = e.clientY - rect.top;
+  }
+});
+
+window.addEventListener('mouseup', e =&gt; {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = 0;
+    y = 0;
+    isDrawing = false;
+  }
+});
+
+function drawLine(context, x1, y1, x2, y2) {
+  context.beginPath();
+  context.strokeStyle = 'black';
+  context.lineWidth = 1;
+  context.moveTo(x1, y1);
+  context.lineTo(x2, y2);
+  context.stroke();
+  context.closePath();
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample("Examples", 640, 450)}}</p>
+
+<h2 id="参考">参考</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">gui</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.Element.mousemove_event")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<div>
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li>{{Event("mousedown")}}</li>
+ <li>{{Event("mouseup")}}</li>
+ <li>{{Event("click")}}</li>
+ <li>{{Event("dblclick")}}</li>
+ <li>{{Event("mouseover")}}</li>
+ <li>{{Event("mouseout")}}</li>
+ <li>{{Event("mouseenter")}}</li>
+ <li>{{Event("mouseleave")}}</li>
+ <li>{{Event("contextmenu")}}</li>
+</ul>
+</div>