在Canvas画布上绘制直线

代码：

<body><canvas style = "border:1px solid red"></canvas><br><input type = "button" value = "画线" onclick = "line()"><input type = "button" value = "取消画笔" onclick = "finishLine()">
</body>
</html>
<script>// 声明全局变量var canvas = document.querySelector("canvas");// 在CSS样式表中设置标签的宽度时仅仅是将标签拉伸了// 修改画布的大小要直接对标签的大小调整canvas.width = "600";canvas.height = "400"var context = canvas.getContext("2d");var points = new Array();// 为画布绑定事件function line(){canvas.addEventListener("mousedown", beginLine);}// 为画布注销事件function finishLine(){canvas.removeEventListener("mousedown", beginLine);// 清空数组points.splice(0, points.length);}function beginLine(e){context.lineWidth = "1px";context.strokeStyle = "red"// 声明局部变量let X = e.pageX - canvas.offsetLeft;let Y = e.pageY - canvas.offsetTop;let pois = Object.create({x:X, y:Y});points.push(pois);if(points.length == 1){return null;}else{context.beginPath();context.moveTo(points[0].x, points[0].y);for(let i = 0; i <= points.length - 1; i++){context.lineTo(points[i].x, points[i].y);}context.stroke();}}
</script>

丑是丑了点，大家凑合看吧：

在Canvas画布上绘制直线相关推荐

如何运用html在画布上画画,如何使用js在画布上绘制图形
在画布上,首先使用JavaScript的HTML DOM方法查找元素,在使用getContext()方法创建绘图对象,最后使用HTML DOM Canvas 对象的属性和方法绘制图形. HTML5元素 ...
CAD教程：画布上绘制一些不规则图形
大家在使用CAD过程中,有时可能需要在画布上绘制一些不规则图形,或者是自己设计一个签名,如果用直线或多线段命令操作比较麻烦,不仅画起来较混乱,还要不停的回车确定我们的坐标点,这时候大家可能会想CAD是 ...
【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )
文章目录一.鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 1.保存当前鼠标指针指向的位置 2.根据鼠标指针指向的位置以及比例重新计算图片位置二.绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩 ...
编程示例：在H5画布上绘制毕达哥拉斯树
编程示例:在H5画布上绘制毕达哥拉斯树 --------------------------绘制毕达哥拉斯的树形图案 04-25 function draw_tree() { draw_squa ...
canvas之一：绘制直线
canvas是html5中最激动人心的技术之一,使用它,可以在浏览器上绘制出各种酷炫的效果,但是呢,千里之行,始于足下,接下来我们就从画一条最简单的直线开始,话不多说,先上效果图: 代码如下: < ...
html 怎么在画布上绘制一个圆,javascript – 如何在画布上画一个圆圈？
我使用 javascript和画布绘制一个数学设计的尺度(用于测量扭矩,包括牛顿米和英尺磅).我已经用三角法来定位我的刻度,自然地用弧线绘制电弧线.问题来了,当他们需要排队,但有一些奇怪的失真.然后我 ...
原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
功能描述待图片上传并加载完成后,重新生成画布: 鼠标在画布区域内绘制,移动,拖拽,删除矩形(如截图工具一般): isboundary() 判断是否需要判断边界问题,默认false. 效果截图实现代 ...
用python画背景_如何在有背景的画布上绘制图像
我想用Tkinger做一个纸牌游戏.在设置一个表图像作为画布的背景.在在桌子的背景上画卡片.这将通过单击按钮(此处未显示)来触发问题是我不能在桌面背景上创建卡片图像.正确的方法是什么?我是否需要为 ...
java 鼠标画矩形_用鼠标在画布上绘制Angular2绘制矩形
我是angular2和画布的新手,我正在尝试创建一个首先将图像绘制到画布上的组件,然后用户可以使用鼠标在该图像上绘制矩形(以点击和拖动方式) . 这是我到目前为止几乎按预期工作的 . @Compone ...

在Canvas画布上绘制直线

在Canvas画布上绘制直线相关推荐

最新文章

热门文章