h5
hst❀
前端踩坑记录/速查本/不定期更新
展开
-
canvas 实现截图功能——截取图片的一部分
整理一下最近在vue项目中做的一个截图功能(只能够截取图片),即鼠标在画布上拖动进行框选截取。窗口里面的html主要是三个部分,一个是可截图区域,一个是截取图片的回显,一个是操作按钮(截图按钮和取消截图按钮)。思路大概如下:做一个弹窗,打开弹窗的时候传入要截的图,接下来在这个窗口里面,点击截图按钮,开始截图,点击取消按钮,取消截图。<!--截图区域--><div id="clip-img-w" class="img_box"> <canvas id="drawc原创 2020-05-15 14:50:39 · 8876 阅读 · 20 评论 -
canvas 制作动效线条背景(可与鼠标交互)
完整代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas"></canvas&g...原创 2020-01-15 10:12:23 · 1050 阅读 · 0 评论 -
canvas画布获取定位的坐标位置
方法一:cvs.onclick = function (e) { if (e.offsetX || e.layerX) { var x = e.offsetX == undefined ? e.layerX : e.offsetX; var y = e.offsetY == undefined ? e.layerY : e.offsetY; ...转载 2019-06-14 09:08:55 · 12462 阅读 · 1 评论 -
HTML 5 拖放(Drag 和 drop)
实现把蓝色div拖动到框中:实现效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5</title></head><body> <div id="di...原创 2019-04-16 11:13:11 · 260 阅读 · 0 评论