![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Canvas
文章平均质量分 73
画布绘图
rudy_zhou
undefined
展开
-
使用canvas 如何绘制形状并支持拖拽、缩放功能
使用canvas 如何绘制形状并支持拖拽、缩放功能引言开始编写首先绘制一个形状绘制多个、多种类型形状添加缩放功能引言 之前遇到过一个面试的机试题,就是用画布绘制形状,并且支持缩放、拖拽功能。现在有点时间就分享一下我是如何一步一步完成这个功能的。看这篇信息之前先取看一下canvas 的 api,canvas API 穿梭机。开始编写先写出容器Dom,和样式html<div id="chart-wrap" class="chart-wrap"></div>cssht原创 2020-05-12 13:03:17 · 3524 阅读 · 8 评论 -
canvas 绘制特效 小球连接线动画
canvas 绘制特效 小球连接线动画引言详细代码demo演示解释结语引言 一个很经典的特效,花了一点时间自己手动写了一个,先上图:详细代码html<canvas id="canvas_bg"></canvas>csshtml, body { height: 100%; padding: 0; margin: 0;}#canvas_bg { display: block;}javascriptclass circle { const原创 2020-05-11 13:04:31 · 1080 阅读 · 0 评论 -
前端压缩图片,以及使用(iview,element-ui )的upload 组件上传前压缩
前端压缩图片,以及使用(iview,element-ui )的upload 组件上传前压缩前言一、压缩方法介绍二、压缩代码三、 `iview` `element-ui`上传处理DEMO演示总结前言 今天分享一下前端如何压缩图片。一、压缩方法介绍前端压缩图片,主要是使用了 toDataURL 这个canvas 的方法,其实就是把 canvas 画布上的内容获取到。这个方法有两个参数,MDN 解释是参数 type 可选 图片格式,默认为 image/png encoderOptions原创 2021-06-01 09:13:48 · 2484 阅读 · 2 评论 -
使用Canvas 绘制施工进度/影像 图,支持滚动、缩放、拖拽、定位、折叠、下载、过渡,支持快捷操作
使用Canvas 绘制施工进度/影像 图,支持滚动、缩放、拖拽、定位、折叠、下载、过渡,支持快捷操作前言演示图DEMO 及介绍总结前言分享一个工作中使用canvas制作的一个施工进度/影响记录 图,代码较长,就不解释了,有兴趣的小伙伴可以查看演示效果,有问题可以下方留言演示图DEMO 及介绍支持操作:1.比例缩放:鼠标在画布内时支持 Ctrl + 滚轮 缩放,Ctrl + alt + 滚轮 快速缩放;2.横向滚动:鼠标在画布内时支持 shift + 滚轮 横向滚动,shift + al原创 2021-03-08 15:38:08 · 798 阅读 · 2 评论