关于canvans画图的一个问题，求给个思路

jianzao5841 2018-07-24 08:40:45

现在的需求是这样，需要将一个图片移动并画线，移动我通过改变.drawImage()找个函数里面初始X,Y随着鼠标移动可以移动，并且也能画线，怎么样确定移动后画笔的起点，因为我发现如果画笔画了，直线会偏移很多，还有怎么样让画的线随着图片放大而放大。谢谢了

...全文

250 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

实现网页 CAD 绘制任意线的功能，需要使用 H5 的 Canvas 元素和 JavaScript 编程语言。在 HTML 页面中，创建一个 Canvas 元素作为画布，设置其宽度和高度。在 JavaScript 代码中，获取 Canvas 对象，并调用其 getContext() 方法获取一个渲染上下文对象。 ARX在线CAD画图，在鼠标按下事件和移动事件中，监听鼠标的位置，并使用 Canvas 上下文对象绘制直线。具体来说，可以记录鼠标按下时的坐标，并在鼠标移动过程中不断更新直线的终点坐标，实现“动态绘制”线条的效果。同时，为了避免出现不必要的重叠和绘制异常，可以在每次绘制前清空 Canvas 画布。实现网页 CAD 绘制任意线的基本思路和代码要根据实际需求进行修改和扩展，比如增加颜色、宽度等属性选择，或者支持多种绘图模式（如矩形、圆形、曲线等）详细代码请下载梦想CAD控件代码包

Canvas是HTML5提供的一个新标签，默认是一块矩形的画布，Canvas本身是没有绘图能力的，但是通过JavaScript语言，可以在Canvas画布上绘制各种各样的效果。常用的ECharts图表库就是基于Canvas绘图技术实现的，例如：常用的饼图样式如下，通过查看浏览器控制台可发现，这些图表都是被绘制在一个叫做canvas的HTML标签内，于是，接下来就尝试利用canvas+JavaScript进行绘图，来模仿实现饼图和玫瑰饼图。...

解决方法使用canvas进行画图在分辨率高的设备上会出现模糊现象，解决这种问题的思路是: 首先讲画布的大小进行按照设备进行放大devicePixelRatio属性进行相应的调整，设个属性是表示浏览器通常会使用几个像素点进行渲染我们设定的1像素（通常会使用2像素进行渲染）。然会将画好的图像使用scale()进行相应的放大这样就可以将图像的模糊问题进行解决了。下面是应用的一个小例子: va...

最近业务突发奇想用饼图当导航首页，于是就想到了利用canvas+js 监听点击的扇形跳转到对应的链接去。废话不多说，先看图。先划一个圆形和一个角度为60度的扇形(圆心100,100，半径100)，当然度数自己可以改，我为了简单先用60代替，下面代码中也是已60度为基础的。 1.实例化canvas var canvas=document.getElementByI...

这次的业务逻辑中要用到小程序canvas。这个canvas的要求是一段文字中间会加入一张图片然后在接下去写一段文字内容。并且文字和图片是随机出现的，因此只能用for循环来做。这里有一个问题就是canvas绘制文字的速度比绘制图片的速度快很多，一个for循环之后，for循环中的文字绘制已经执行完了但是，for循环中的图片还没有绘制好，就已经执行了for循环外面的context.draw()方法绘制...

51,410

社区成员

85,984

社区内容

发帖

与我相关

我的任务

javaspring bootspring cloud 技术论坛（原bbs）

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章