我用html5写的画板,但事件处理不好,请高手帮忙修改,我会第一时间测试采纳

我用html5写的画板,但事件处理不好,请高手帮忙修改,我会第一时间测试采纳,第1张

今天心情好,给你补充完整吧。添加一个变量判断是否在画。。你对比一下我们的代码,你就知道什么意思了。。。。直接拷贝运行吧。如果还不成功,就换台电脑吧 哈哈。

<!DOCTYPE HTML>

<!--This text is a comment-->

<html>

<head></head>

<script type="text/javascript">

var c = document.getElementById("myCanvas")

var drawtext=c.getContext("2d")

var startdraw = false

function begin(e)

{

var c = document.getElementById("myCanvas")

var drawtext=c.getContext("2d")

x=e.clientX

y=e.clientY

document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"

drawtext.beginPath()

drawtext.moveTo(x,y)

startdraw = true

}

function end(a)

{

if(startdraw)

{

var c = document.getElementById("myCanvas")

var drawtext=c.getContext("2d")

x1=a.clientX

y1=a.clientY

document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x1 + "," + y1 + ")"

drawtext.lineTo(x1,y1)

drawtext.stroke()

}

}

function finish()

{

startdraw = false

}

</script>

<body>

<canvas id="myCanvas" height="700" width="1580" style="border:2px solid #06c"

onmousedown="begin(event)" onmousemove="end(event)" onmouseup="finish()"></canvas>

<div id="xycoordinates"></div>

</body>

</html>

方法1:文件 - 新建,修改画板数目。点击更多设置,可设置画板的参数。

方法2:Ctrl + N,修改画板数目。点击更多设置,可设置画板的参数。

方法3:点击起始页左边的新建按钮,修改画板数目。点击更多设置,可设置画板的参数。

方法4: 在当前打开的画板页面,选择窗口-画板,点击右上角的新建按钮。

方法5:双击画板工具,在打开的窗口中设置参数。

怎么打开:视图 View > 智能参考线 Smart Guide (Ctrl + U)

作用:智能对齐多个画板

方法1:选择“画板”工具,单击以选择要复制的画板,然后单击“属性”面板中的“新建画板”按钮。

方法2:要创建多个复制画板,选择“画板”工具,单击以选择要复制的画板,按住 Alt 键并多次单击直到获得所需的数量。或者,使用画板工具,按住 Alt 键 (Windows) 或 Option 键 (macOS) 并拖动要复制的画板。

方法1:点击上方工具栏的移动/复制带画板的图稿按钮,重叠的图文会和画板一起移动。

方法2:选择属性中的随画板移动图稿,按住 Alt 键 (Windows) 或 Option 键 (macOS),然后拖动。

图板功能下,上方的图标都可以在属性里看到。要想打开属性,把AI选择成“传统基本功能”,再选择“重置传统基本功能”。

可以不断重复“还原”(undo,Ctrl + Z)和“重做”(redo,Shift + Ctrl + Z)。但是,点了“文件”- “恢复(revert)” 后,“还原”和“重做”就变灰了。

还原(undo,Ctrl + Z),可还原到上一步。

重做(redo,Shift + Ctrl + Z),可以撤销还原。

恢复 revert(文件-恢复,F11),可以恢复到文件的初始状态。

方法1:直接拖动画板工具,会画一个新的画板。但是,按住shift,再拖动画框,就能选中一系列画板或内容了。再按shift,选中刚才选中的一部分内容,能取消选择unselect。选中的画板周围有一圈淡蓝色的框。

方法2:Marquee or drag across. 在几个画板上画框。shift + marquee可以反选。

方法1:直接拖动。

方法2:想要按照绝对距离拖动,可在顶部的xy数值框的数字后面直接写+/-数字,再按Enter。在数字后面直接写/2,可以减少两倍。直接写*2,增大两倍。

复制一个画板上的图文后,点击编辑>在所有画板里粘贴,可把内容复制到其他画板上。

方法1:在顶部的画板命名框里点击,可以重新命名。

方法2:打开画板工具,双击画板名称,就可以重新命名。

方法1:选择想要复制的画板上的图文,复制到灰色区域,然后在图文直接画一个画板。

方法2:Alt + drag ——从图文的中部向右下方拖动,然后按住Alt键,就能围绕图文画一个对称的画板。想要调整画板大小,按住Alt键并拖动边框,能对称地上下或左右调整。Shift + Alt + drag ——  能上下左右等比列调整大小。

方法3:取消选择其他画板后,在想要创建画板的图文上点击即可。

方法4:选择一个画板,再点击上方的创建按钮,就会在刚才选择过的画板旁新建一个一模一样大小的画板。

方法5:先点击画板工具,再选择要复制的画板,按住Alt键,拖动到灰色区域,就能直接复制一个画板。拖动的时候,同时按住Shift,可以对其到其他画板。

第一步:从窗口中打开对齐工具。

第二步:点击右上角的设置按钮,选择“显示选项”,打开分布间距和对齐。

第三步:点击图文,再点击右下角的对齐按钮,选择“对齐画板”。

第四部:点击“对齐对象”下面的“水平居中对齐”,即第一行图标里的第二个。要是没有居中,点击“垂直居中对齐”。

注:如果画板上有多个对象,需要先把所有对象编组,前往对象 - 编组,或按Ctrl + G。按Shift + Ctrl + G,可取消编组。若图像的描边很小,对齐路径,直接对齐就可以了;如果图像的描边比较粗,要点击右上角的设置按钮,勾选使用“使用预览边界”,然后再对齐。

如果窗口里的画板较多,想要在窗口中全部显示所有画板,可以点击视图>画板适合窗口大小。

方法1:选中画板,点击画板上的浅蓝色正方形拖动。拖动时按住Alt,可以上下或左右等距离拖动,按住Shift + Alt +拖动,能等比例调整画板大小并保证图文在画板的正中。选中多个画板,Alt + 拖动,或Shift + Alt +拖动,可以批量调整画板大小。

方法2:点击画板上方“自定”右边的下拉按钮,选择一种画板模式。

方法3:双击图文,自动适应画板大小。

方法4:想画一个能囊括所有面板的面板——在其他面板旁边画一个空白面板,前往对象>画板>适合图稿边界。

方法5:选中一个画板,前往上方的工具条,修改高和宽的数值。

方法6:打开画板面板,点击要调整的画板(在黑箭头选择模式下也可以),点击右上角的更多设置按钮,选择“画板选项”,在d出的选项板中设置即可。

从窗口中可以找到画板面板入口,也可以直接点击右侧的图标,打开画板面板。

打开画板面板后,点击画板工具后,可直接在面板上选择画板。也可以按住Shift或Ctrl多选。最下面的面板,在最顶层。

在画板中,选中画板再按Delete或直接将画板拖放到右下角的垃圾桶,可以删除画板。不过,画板上的图文不会被删除。若要全部删掉,再选择图文并删除。

点击AI左下方的按钮,可以轻松一键切换画板。

在热键没被占用的情况下,按Shift + page up/page down也可以切换面板。

在窗口中,可以打开对齐面板。“对齐对象”用来调整对象之间的对齐方式,“分布对象”用来调整对象间的分布距离。

方法1:在面板工具状态下,点击右上方的“全部重新排列”,打开后,选择排列方式,点击确定。

方法2:点击画板面板右上角的更多设置按钮,选择“重新排列所有画板”。

方法3:直接点击画板面板左下角的图标,进入相同的设置面板。

打开标尺:视图 - 标尺 - 显示标尺;或直接按Ctrl + R。

改变标尺单位:光标放在画板周围的标尺上,右击,选择对应的单位即可。

在上方或左边的标尺上双击,可以自动画一条参考线

改变标尺起点的方法:

方法1:想要把一个画板作为参考点,选择该画板后,点击“参考点”图标。

方法2:把光标放在标尺左上角的十字上,然后直接拖放,拖到哪里,哪里的标尺就从0开始。

方法3:选中一个作为参考点的面板,然后点击左上角的十字。

想要取消参考线,前往视图 - 参考线 - 清除参考线。选择了面板工具的状态下,清除参考线选项不可用,先按两次Esc,再清除。

想要锁定、解锁、隐藏参考线等,又可以在画板上右击鼠标或前往视图 - 参考线,然后选择对应的 *** 作。

拖动参考线时,想要让参考线和刻度对齐,可以按住Shift键。

全局标尺和画板标尺:在视图 - 标尺 - 画板标尺状态下,点击黑色箭头后,选择哪个面板,哪个面板就变成了参考面板。想要改变改设置,可以去视图 - 标尺 - 更改为全局标尺。

在画板上右击,选择“显示标尺”,或点击“视图”,选择“显示标尺”。然后从上到下或从左向右拖动参考线。

想要参考线与标尺的刻度对齐,在拖拽参考线的同时,按住Shift键。

想要在特定刻度直接生成参考线,直接点击该刻度的位置就好了。为了和刻度线齐平,可以按住Shift键并双击刻度。

拖动参考线的时候,按住Alt键,可以将参考线旋转90度。

从标尺的左上角十字部位开始拖动,同时按住Ctrl键,可以画出一条十字参考线,即同时画出一条横向和纵向参考线。

想要清除参考线,点击“视图” - “参考线” - “清除参考线”。

想要隐藏参考线,右击,点击“隐藏参考线”,或点击“视图” - “参考线” - “隐藏参考线”。

想要锁定或解锁参考线,右击,点击“锁定/解锁参考线”,或点击“视图” - “参考线” - “锁定/解锁参考线”。

在参考线未锁定状态下,用鼠标画一个线框,可以选中多个参考线。

选定两个参考线,打开“对齐”工具条,可以调整参考线的对齐模式。

选中一个参考线后,可以在上方的控制面板中,填入数值,修正参考线的位置。

选中参考先后,按Shift + Alt + ↑或↓,可以均匀间距地复制参考线。

https://helpx.adobe.com/cn/illustrator/using/using-multiple-artboards.html

画直线lineTo。

var drawing=document.getElementById("drawing")

    var context=drawing.getContext("2d")

    context.beginPath()

    context.moveTo(0,0)

    context.lineTo(50,50)

    context.stroke()

记着调用beginPath()和stroke(),要设置样式的话,用strokeStyle,lineWidth。

看canvas。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11422243.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存