前言

好久没写博客了QUQ 记得上次写博客还是上次

<script>let isActive = false; //是否弃用let divContainer = document.getElementById("divContainer"); //生成的父级容器let drawingCanvas; //绘制的canvaslet drawingContext; //绘制的canvas2dlet isDrawing = false; //是否正在拖动let drewPoints = []; //画线的点function activate() {console.log(123)if (!isActive) {isActive = true;if (!document.getElementById("lasso")) {// 创建lasso的画布initDOM('canvas', 'lasso');drawingContext = drawingCanvas.getContext('2d');drawingCanvas.style.cursor = 'cursor';}}// 监听鼠标点击事件drawingCanvas.addEventListener("mousedown", (e) => {onDrawingStart(e)})// 监听鼠标移动事件drawingCanvas.addEventListener("mousemove", (e) => {onDrawing(e)})// 监听鼠标抬起事件drawingCanvas.addEventListener("mouseup", (e) => {onDrawingEnd(e)})}function initDOM(tag, id) {// 创建dom对象let dom = document.createElement(tag);// 添加styledom.style.position = 'absolute';dom.style.left = "0px";dom.style.top = "0px";dom.id = id;dom.style.backgroundColor = "rgba(245,245,245,1.0)"let width = "1000";let height = "500";// 设置宽高if (window.devicePixelRatio) {dom.style.width = width + "px";dom.style.height = height + "px";dom.height = height * window.devicePixelRatio;dom.width = width * window.devicePixelRatio;}divContainer.appendChild(dom);drawingCanvas = dom;}/*** 鼠标点击* @param event*/function onDrawingStart(event) {let drawingRectangle = drawingCanvas.getBoundingClientRect();// 开始绘制if (isActive) {isDrawing = true;drewPoints = [];selectedNodes = [];drewPoints.push({x: event.clientX - drawingRectangle.left,y: event.clientY - drawingRectangle.top});// 改变鼠标形状drawingCanvas.style.cursor = 'cell';// 阻止默认事件发生event.stopPropagation();}}/*** 鼠标拖动* @param event*/function onDrawing(event) {// 绘制线if (isActive && isDrawing) {let x = 0,y = 0,drawingRectangle = drawingCanvas.getBoundingClientRect();x = event.clientX;y = event.clientY;drewPoints.push({x: x - drawingRectangle.left,y: y - drawingRectangle.top});// 生成绘制的属性drawingContext.lineWidth = 2;drawingContext.strokeStyle = 'rgba(57,207,255,1.0)';drawingContext.fillStyle = 'rgba(224, 245, 255, 0.25)';drawingContext.lineJoin = 'round';drawingContext.lineCap = 'round';// 清空画布drawingContext.clearRect(0, 0, drawingContext.canvas.width, drawingContext.canvas.height);let sourcePoint = drewPoints[0],destinationPoint = drewPoints[1],pointsLength = drewPoints.length,// 获取绘制的曲线的控制点getMiddlePointCoordinates = function (firstPoint, secondPoint) {return {x: firstPoint.x + (secondPoint.x - firstPoint.x) / 2,y: firstPoint.y + (secondPoint.y - firstPoint.y) / 2};};// 开始绘制drawingContext.beginPath();drawingContext.moveTo(sourcePoint.x, sourcePoint.y);for (let i = 1; i < pointsLength; i++) {let middlePoint = getMiddlePointCoordinates(sourcePoint, destinationPoint);// 绘制贝赛尔曲线drawingContext.quadraticCurveTo(sourcePoint.x, sourcePoint.y, middlePoint.x, middlePoint.y);sourcePoint = drewPoints[i];destinationPoint = drewPoints[i + 1];}drawingContext.lineTo(sourcePoint.x, sourcePoint.y);drawingContext.stroke();// 填充drawingContext.fill();// 阻止默认事件发生event.stopPropagation();}}/*** 鼠标松开* @param e*/function onDrawingEnd(e) {if (isActive && isDrawing) {isDrawing = false;drawingContext.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);drawingCanvas.style.cursor = 'default';e.stopPropagation();}}activate()</script>

Canvas画布实现套索的效果相关推荐

用Canvas画布展示出3D效果的网页源码
大家好,今天给大家介绍一款,用Canvas画布展示出3D效果的网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 每次点击页面中间的卡片,就会触发3d旋转特效(图2) 图2 源码预览, < ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...
HTML用画布实现刮刮卡,利用HTML5的画布Canvas实现刮刮卡效果_javascript技巧
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
html5 图片弹跳,html5 canvas画布里面圆球弹跳动画效果代码
特效描述:html5 canvas 画布圆球弹跳动画.html5 跳动的球体代码结构 1. HTML代码 Untitled Document body { margin: 0px; } var i ...
js实现图片虚化_js canvas画布实现高斯模糊效果
最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果.在实现局部模糊效果前,首先能够实现全部模糊.经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实 ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
js将文字填充与canvas画布再转为图片
需求:封装consul服务的webUI: 原因:展示consul的服务信息时,需要嵌套动画,由于其没有内置的icon,所以将服务name放于图片位: 分析:展示信息时采用了卡片式的服务布局,缩放式的服 ...

Canvas画布实现套索的效果

前言

Canvas画布实现套索的效果相关推荐

最新文章

热门文章