如何利用canvas实现按住鼠标移动绘制出轨迹
该例子实现了使用鼠标左键记录 ，鼠标移动时，触发拖曳功能，拖曳整个 canvas。参考 Move and zoom a tkinter canvas with mouse 需要注意：鼠标事件报告的是“屏幕坐标”（screen coordinates）。当您使用滚动画布时，通常需要将这些坐标转换为“画布（即，滚动区域）坐标”。
如果用户的浏览器没有提供该API，则使用JS的setTimeout。其特性类似于AS的 ENTER_FRAME 事件。
项目上需要绘制坐标轨迹，找开源组件也是费尽周折，最后发现Canvas + Polyline就可以基本的轨迹功能。为使轨迹不过于单调增加了网格线背景。学习WPF： 第6个月。网格线的绘制主要依赖窗口的宽高和设定的间隔计算，画多少行，画多少列，画多长，画多高。
此外，在空间中使用鼠标跟随功能时，还可以考虑使用HTML5的Canvas元素和JavaScript来实现更高级的效果。通过Canvas元素，可以绘制图形，并使用JavaScript来监听鼠标的移动事件。在事件处理函数中，可以获取鼠标的当前位置，并根据这个位置信息来更新Canvas上的图形元素的位置，使其跟随鼠标移动。
在最后onmouseup时判断clickFlag的值，为true时才触发点击事件。也就是说当你按下鼠标时，只有不发现移动，松开鼠标时才会触发点击事件。
线段的画法，我们知道了，如何用它来画射线直线呢？ 图6 画射线：移动光标到【直尺工具】上，按住鼠标不放，待【直尺工具】展开后，不要松开鼠标，继续移动光标到射线工具上 ，松开鼠标，直尺工具变为 。
canvas图片缩放-JS中canvas画布绘制中如何实现缩放,位移,旋转
这里首先绘制了一个黑色矩形，然后调用 setTransform（） 方法，接着把画布旋转 45 度，最后绘制红色矩形。因为没有指定旋转原点，所以默认原点在 （0，0） ，导致红色矩形旋转后，有一半的区域移到了画布之外。我们可以使用 translate（x，y） 方法来指定变换的原点。
在固定的canvas画布内缩放的实现：思路：限定canvas的范围，获取到2d句柄后，可以调用scale方法进行缩放。
canvas 图片都是js控制的，你直接修改图片尺寸。
然后translate到（x，y）即可，之后调用rotate进行旋转。旋转之后填充时注意：ctx.fillRect（-50，-25，100，50）；x = - 宽度/2 y = -高度/2 fillRect（x，y，宽度，高度）你的例子，代码控制比较看不懂。。，所以没在基础上整改。
要设置canvas的画布大小，使用的是和；要设置画布的实际渲染大小，使用的style属性或CSS设置的width和height，只是简单的对画布进行缩放。
Javascript如何在网页上实现画图功能
1、在画布上，首先使用JavaScript的HTML DOM方法查找元素，在使用getContext（）方法创建绘图对象，最后使用HTML DOM Canvas 对象的属性和方法绘制图形。
2、首先，需要在HTML页面中创建一个SVG元素，并指定它的宽度和高度：``接下来，可以使用D3中的selection.append（）方法向SVG元素中添加其他元素，如图表的坐标轴、图例、数据点等。
3、Canvas画布，利用JavaScript在网页绘制图像 在标签中给上宽高：SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML 出来的时间比较老 SVG 用来定义用于网格的基于矢量的图形。
4、在 HTML 文档中输入 标签。 在 JavaScript 文档中，创建一个变量，在编写脚本时该变量将代替“can1”。这里，我们将该变量命名为“myCanvas”，并使用 getElementById 将其链接到“can1”。
5、第一段是画板代码。第二段是拖动和点击的代码 想画之后再拖动好麻烦，我地方法只能是记住画的矩形坐标之后判断鼠标点击点再坐标内 就拖动画板，太麻烦了，如果找到好的方法贴出来。
6、我之前写过一个 jQuery 小插件：jQuery Ruler，用来测量任意网站元素的尺寸和坐标。刚才整理了一下，顺便把你需要的代码用原生 Javascript 写出来了。没有什么实际用途，只是实现绘制矩形和拖拽功能。
如何用js新建一个canvas?
创建画布在介绍如何绘制图形前，我们首先要使用canvas元素创建一个画布：canvas id=myCanvas width=300 height=200 style=border：2px solid red；当前的浏览器不支持HTML5 canvas标记。
要在Node.js中创建一个图形验证码，可以使用canvas和crypto库。首先，确保已经安装了这两个库。
首先我们需要创建一张画布作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个canvas元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。
html5中的canvas本身的API是不存在图层概念的。要想实现实现多图层功能，必须要使用多个canvas对象，不过这些canvas对象，是在内存中的，而不是在html的元素树中。每个canvas维持一个图层就可以，然后主canvas是负责显示最后的合成的效果。
