脚本宝典收集整理的这篇文章主要介绍了

前端系列——canvas实现按住鼠标移动绘制出轨迹

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h3 id="articleHeader0">概要</h3> <p>工作以来,写过vue、react、正则、算法、小程序等知识,唯独没有写过canvas,因为实在不会啊!</p> <p>2018年,给自己设定一个小目标:学会canvas,达到的效果是能用canvas实现一些<a href="http://www.js-code.com/tag/css3" title="css3" target="_blank">css3</a>不容易实现的动画。</p> <p>本文作为学习canvas的第一篇收获,很多人初学canvas做的第一个demo是实现一个“钟”,当然,我也实现了一个,不过不讲这个,而是讲讲一个更有趣、也更简单的玩意。</p> <h3 id="articleHeader1">鼠标按住绘制轨迹</h3> <h4>需求</h4> <p><strong>在一块canvas画布上,初始状态画布什么都没有,现在,我想给画布加一点鼠标事件,用鼠标在画布上写字。具体的效果是鼠标移动到画布上任意一点,然后按住鼠标,移动鼠标的位置,就可以开始写字啦!</strong></p> <p><span class="img-wrap"><img data-src="/img/bV25SS?w=162&amp;h=85" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h4>原理</h4> <p><strong>先简单分析下思路,首先我们需要一个canvas画布,然后计算鼠标在画布上的位置,给鼠标绑定onmouse<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>wn事件和onmousemove事件,在移动过程中绘制出路径,松开鼠标的时候,绘制结束。</strong></p> <p>这个思路虽然很简单,但是里面有些地方需要小技巧实现。</p> <p><strong>1、需要一个html文件,包含canvas元素。</strong></p> <p>这是一个宽度800,高度400的画布。为什么没有写px呢?哦,暂时没搞懂,canvas文档推荐的。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!doctype html><br /> <html class=&quot;no-js&quot; lang=&quot;zh&quot;><br /> <head><br /> <meta charset=&quot;utf-8&quot;><br /> <meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;ie=edge&quot;><br /> <title>canvas学习</title><br /> <meta name=&quot;description&quot; content=&quot;&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;></p> <link rel=&quot;manifest&quot; href=&quot;site.webmanifest&quot;> <link rel=&quot;apple-touch-icon&quot; href=&quot;icon.png&quot;> <link rel=&quot;stylesheet&quot; href=&quot;css/main.css&quot;> </head><br /> <body><br /> <canvas id=&quot;theCanvas&quot; width=&quot;800&quot; height=&quot;400&quot;></canvas><br /> <script src=&quot;js/main.js&quot;></script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>ctype html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-js"</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"utf-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"x-ua-compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>canvas学习<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">""</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>itial-scale=1"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a></span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"man<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>est"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"site.webmanifest"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"icon.png"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"css/main.css"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"theCanvas"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"800"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"400"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/main.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p><strong>2、判断当前环境是否支持canvas。</strong></p> <p>在ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>.js中,我们写一个自执行函数,下面是兼容性判断的代码片段,“代码主体”中将会是实现需求的核心。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { //不兼容canvas return false } else { //代码主体 } })()" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript">(<span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> theCanvas = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.querySelector(<span class="hljs-string">'#theCanvas'</span>) <span class="hljs-keyword">if</span> (!theCanvas || !theCanvas.getCon<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>) { <span class="hljs-comment">//不兼容canvas</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span> } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> { <span class="hljs-comment">//代码主体</span> } })()</code></pre> <p><strong>3、获取2d对象。</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" let context = theCanvas.getContext('2d')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript" style="word-break: break-word; white-space: initial;"> <span class="hljs-keyword">let</span> context = theCanvas.getContext(<span class="hljs-string">'2d'</span>)</code></pre> <p><strong>4、获取当前鼠标相对于canvas的坐标。</strong></p> <p>为什么要获取这个坐标呢?因为鼠标默认是获取当前窗口的相对坐标,而canvas可以位于页面上的任何位置,所以需要通过计算才能得到真实的鼠标坐标。</p> <p>将获取鼠标相对于canvas的真实坐标封装成了一个函数,如果你觉得抽象,可以在草稿纸上画图来理解为什么要这么运算。</p> <p>通常情况下,可以是x - rect.left和y - rect.<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>。但为什么实际上却是x - rect.left * (canvas.width/rect.width)呢?</p> <p>canvas.width/rect.width表示判断canvas中存在的缩放行为,求出缩放的倍数。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const windowToCanvas = (canvas, x, y) => {<br /> //获取canvas元素距离窗口的一些属性,MDN上有解释<br /> let rect = canvas.getBoundingClientRect()<br /> //x和y参数分别传入的是鼠标距离窗口的坐标,然后减去canvas距离窗口左边和顶部的距离。<br /> return {<br /> x: x - rect.left * (canvas.width/rect.width),<br /> y: y - rect.top * (canvas.height/rect.height)<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> <a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a>ToCanvas = <span class="hljs-function">(<span class="hljs-params">canvas, x, y</span>) =&gt;</span> { <span class="hljs-comment">//获取canvas元素距离窗口的一些属性,MDN上有解释</span> <span class="hljs-keyword">let</span> rect = canvas.getBoundingClientRect() <span class="hljs-comment">//x和y参数分别传入的是鼠标距离窗口的坐标,然后减去canvas距离窗口左边和顶部的距离。</span> <span class="hljs-keyword">return</span> { <span class="hljs-attr">x</span>: x - rect.left * (canvas.width/rect.width), <span class="hljs-attr">y</span>: y - rect.<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a> * (canvas.height/rect.height) } }</code></pre> <p><strong>5、有了第4步的利器函数,我们可以给canvas加上鼠标事件了!</strong></p> <p>先给鼠标绑定按下<a href="http://www.js-code.com/tag/onmousedown" title="onmousedown" target="_blank">onmousedown</a>事件,用moveTo绘制坐标起点。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="theCanvas.onmousedown = function(e) { //获得鼠标按下的点相对canvas的坐标。 let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //es6的解构赋值 let { x, y } = ele //绘制起点。 context.moveTo(x, y) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript">theCanvas.<a href="http://www.js-code.com/tag/onmousedown" title="浏览关于“onmousedown”的文章" target="_blank" class="tag_link">onmousedown</a> = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ <span class="hljs-comment">//获得鼠标按下的点相对canvas的坐标。</span> <span class="hljs-keyword">let</span> ele = windowToCanvas(theCanvas, e.clientX, e.clientY) <span class="hljs-comment">//<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>的<a href="http://www.js-code.com/tag/%e8%a7%a3%e6%9e%84%e8%b5%8b%e5%80%bc" title="浏览关于“解构赋值”的文章" target="_blank" class="tag_link">解构赋值</a></span> <span class="hljs-keyword">let</span> { x, y } = ele <span class="hljs-comment">//绘制起点。</span> context.moveTo(x, y) }</code></pre> <p><strong>6、移动鼠标的时候,没有鼠标长按事件,又该怎么监听呢?</strong></p> <p>这里用到的小技巧是在onmouse<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>wn内部再执行一个onmousemove(鼠标移动)事件,这样就能监听按住鼠标并且移动了。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="theCanvas.onmousedown = function(e) { //获得鼠标按下的点相对canvas的坐标。 let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //es6的解构赋值 let { x, y } = ele //绘制起点。 context.moveTo(x, y) //鼠标移动事件 theCanvas.onmousemove = (e) => {<br /> //移动时获取新的坐标位置,用lineTo记录当前的坐标,然后stroke绘制上一个点到当前点的路径<br /> let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)<br /> let { x, y } = ele<br /> context.lineTo(x, y)<br /> context.stroke()<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript">theCanvas.onmousedown = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ <span class="hljs-comment">//获得鼠标按下的点相对canvas的坐标。</span> <span class="hljs-keyword">let</span> ele = windowToCanvas(theCanvas, e.clientX, e.clientY) <span class="hljs-comment">//es6的解构赋值</span> <span class="hljs-keyword">let</span> { x, y } = ele <span class="hljs-comment">//绘制起点。</span> context.moveTo(x, y) <span class="hljs-comment">//鼠标移动事件</span> theCanvas.onmousemove = <span class="hljs-function">(<span class="hljs-params">e</span>) =&gt;</span> { <span class="hljs-comment">//移动时获取新的坐标位置,用lineTo记录当前的坐标,然后stroke绘制上一个点到当前点的路径</span> <span class="hljs-keyword">let</span> ele = windowToCanvas(theCanvas, e.clientX, e.clientY) <span class="hljs-keyword">let</span> { x, y } = ele context.lineTo(x, y) context.stroke() } }</code></pre> <p><strong>7、鼠标松开的时候,不再绘制路径。</strong></p> <p>有什么办法可以让<a href="http://www.js-code.com/tag/onmouseup" title="onmouseup" target="_blank">onmouseup</a>事件中阻止掉上面监听的2种事件呢?方法挺多的,设置<a href="http://www.js-code.com/tag/onmousedown" title="onmousedown" target="_blank">onmousedown</a>和onmousemove为<a href="http://www.js-code.com/tag/null" title="null" target="_blank">null</a>算是一种,我这里用到了“开关”。isAllowDrawL<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>e设置为bool值,来控制函数是否执行,具体代码可以看下面完整的源码。</p> <h3 id="articleHeader2">源码</h3> <p>分为3个文件,index.html、main.js、utils.js,这里用到了<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>的语法,我是使用parcle配置好了开发环境,所以不会有报错,如果你直接复制代码,运行的时候出现错误,在无法升级浏览器的情况下,可以将<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>语法改成<a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a>.</p> <p><strong>1、index.html</strong><br />上面已经展示了,不再复述。</p> <p><strong>2、main.js</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import { windowToCanvas } from './utils' (function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { return false } else { let context = theCanvas.getContext('2d') let isAllowDrawLine = false theCanvas.onmousedown = function(e) { isAllowDrawLine = true let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.moveTo(x, y) theCanvas.onmousemove = (e) => {<br /> if (isAllowDrawLine) {<br /> let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)<br /> let { x, y } = ele<br /> context.lineTo(x, y)<br /> context.stroke()<br /> }<br /> }<br /> }<br /> theCanvas.onmouseup = function() {<br /> isAllowDrawLine = false<br /> }<br /> }<br /> })()" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript"><span class="hljs-keyword">import</span> { windowToCanvas } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils'</span> (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">let</span> theCanvas = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#theCanvas'</span>) <span class="hljs-keyword">if</span> (!theCanvas || !theCanvas.getContext) { <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span> } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">let</span> context = theCanvas.getContext(<span class="hljs-string">'2d'</span>) <span class="hljs-keyword">let</span> isAllowDrawLine = <span class="hljs-literal">false</span> theCanvas.onmousedown = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ isAllowDrawLine = <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span> <span class="hljs-keyword">let</span> ele = windowToCanvas(theCanvas, e.clientX, e.clientY) <span class="hljs-keyword">let</span> { x, y } = ele context.moveTo(x, y) theCanvas.onmousemove = <span class="hljs-function">(<span class="hljs-params">e</span>) =&gt;</span> { <span class="hljs-keyword">if</span> (isAllowDrawLine) { <span class="hljs-keyword">let</span> ele = windowToCanvas(theCanvas, e.clientX, e.clientY) <span class="hljs-keyword">let</span> { x, y } = ele context.lineTo(x, y) context.stroke() } } } theCanvas.<a href="http://www.js-code.com/tag/onmouseup" title="浏览关于“onmouseup”的文章" target="_blank" class="tag_link">onmouseup</a> = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ isAllowDrawLine = <span class="hljs-literal">false</span> } } })()</code></pre> <p><strong>3、utils.js</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/* * 获取鼠标在canvas上的坐标 * */ const windowToCanvas = (canvas, x, y) => {<br /> let rect = canvas.getBoundingClientRect()<br /> return {<br /> x: x - rect.left * (canvas.width/rect.width),<br /> y: y - rect.top * (canvas.height/rect.height)<br /> }<br /> }</p> <p>export {<br /> windowToCanvas<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javaScript"><span class="hljs-comment">/* * 获取鼠标在canvas上的坐标 * */</span> <span class="hljs-keyword">const</span> windowToCanvas = <span class="hljs-function">(<span class="hljs-params">canvas, x, y</span>) =&gt;</span> { <span class="hljs-keyword">let</span> rect = canvas.getBoundingClientRect() <span class="hljs-keyword">return</span> { <span class="hljs-attr">x</span>: x - rect.left * (canvas.width/rect.width), <span class="hljs-attr">y</span>: y - rect.top * (canvas.height/rect.height) } } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> { windowToCanvas }</code></pre> <h3 id="articleHeader3">总结</h3> <p>这里有个误区,我用的是canvas对象绑定事件 theCanvas.<a href="http://www.js-code.com/tag/onmouseup" title="onmouseup" target="_blank">onmouseup</a>,其实canvas不能绑定事件,真正绑定的是<a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>和<a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a>。但是由于浏览器会自动帮你判断并且移交事件处理,所以完全不用担心。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

前端系列——canvas实现按住鼠标移动绘制出轨迹

全部内容,希望文章能够帮你解决

前端系列——canvas实现按住鼠标移动绘制出轨迹

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过