使用帆布怎么实现橡皮筋式线条绘图应用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
<强>什么叫橡皮筋式
指画图时橡皮筋一样伸缩自如. .
例子如下:point_down:
,, & lt; canvas id=癱anvas",宽度=?00“,身高=?00“,风格=氨呔?,1 px solid 黑色;“祝辞,& lt;/canvas>
,,,& lt; script 类型=拔谋?javascript"比;
,,,,,,,let canvas =, . getelementbyid(& # 39;帆布# 39;),
,,,,,,,,,,,ctx =, canvas.getContext (& # 39; 2 d # 39;),
,,,,,,,,,,,canvasLeft =, canvas.getBoundingClientRect () .left,,//getBoundingClientRect()获取元素位置
,,,,,,,,,,,canvasTop =, canvas.getBoundingClientRect直()上;
,,,,,,,let imageData;,//记录图像数据
,,,,,,,let start =, new 地图([[& # 39;x # 39;, null], [& # 39; y # 39;, null]]);
,,,,,,,let drag =,假;//记录是否处于拖动状态
,,,,,,,canvas.onmousedown =, function (e), {
,,,,,,,,,,,let pos =, positionInCanvas (e, canvasLeft,, canvasTop);
,,,,,,,,,,,start.set (& # 39; x # 39;,, pos.x);
,,,,,,,,,,,start.set (& # 39; y # 39;,, pos.y);
,,,,,,,,,,,drag =,真的;
,,,,,,,,,,,//记录imageData
,,,,,,,,,,,imageData =, ctx.getImageData (0, 0, canvas.width canvas.height);
,,,,,,,}
,,,,,,,canvas.onmousemove =, function (e), {
,,,,,,,,,,,如果(drag ===, true) {
,,,,,,,,,,,,,,let pos =, positionInCanvas (e, canvasLeft,, canvasTop);
,,,,,,,,,,,,,,//相当于把扫描出来的线都擦掉,重新画
,,,,,,,,,,,,,,ctx.putImageData (imageData, 0, 0);
,,,,,,,,,,,,,,ctx.beginPath ();
,,,,,,,,,,,,,,ctx.moveTo (start.get (& # 39; x # 39;),, start.get (& # 39; y # 39;));
,,,,,,,,,,,,,,ctx.lineTo (pos.y pos.x也);
,,,,,,,,,,,,,,ctx.stroke ();
,,,,,,,,,,,}
,,,,,,,}
,,,,,,,canvas.onmouseup =, function , (e), {
,,,,,,,,,,,drag =,假;
,,,,,,,}
,,,,,,,function positionInCanvas (e, canvasLeft,, canvasTop),{//获取画布中鼠标点击位置
,,,,,,,,return {
,,,,,,,,,,,,,,,,,x: e.clientX 作用;canvasLeft,
,,,,,,,,,,,,,,,,,y: e.clientY 作用;canvasTop
,,,,,,,,,},,,,,,,
,,,,,,,},,,,
null
