canvas绘画流动贝塞尔渐变曲线，三点绘画一条线

yessica__

于 2023-03-31 11:22:50 发布

阅读量394

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/qq_37641027/article/details/129875664

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该效果结合多个前辈文章进行改良的，底线是固定颜色，流动线段是渐变的，使用的效果是canvas内置的一些方法，并通过一些算法进行计算的流动效果。希望有可以优化的建议可以帮忙提一下，提前感谢感谢！！

一下是代码，复制，直接可以运行

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

</head>

</head>
<body >

<div class="col-sm-8 box3" style="height: 100%; position: absolute; top: -113px; left: -1000px;">
<div class="beijingmap">

<div class="mapdata">

<div class="site" style="left:590px;top:76px;">
<div class="siteText" siteName="7" sSubNetId=""></div>
<div class="siteName">7</div>
</div>
<div class="site" style="left:354px;top:595px;">
<div class="siteText" siteName="8" sSubNetId="6546F59E3837AADC8F457F8D86EEBA37"></div>
<div class="siteName">8</div>
</div>
<div class="site" style="left:719px;top:352px;">
<div class="siteText" siteName="9" sSubNetId=""></div>
<div class="siteName">9</div>
</div>
<div class="site" style="left:863px;top:533px;">
<div class="siteText" siteName="10" sSubNetId=""></div>
<div class="siteName">10</div>
</div>
<div class="site" style="left:1306px;top:620px;">
<div class="siteText" siteName="11" sSubNetId="64861712A1E407985A72771F27F1D24F"></div>
<div class="siteName">11</div>
</div>
<div class="site" style="left:1306px;top:780px;">
<div class="siteText" siteName="12" sSubNetId="3F9FEE1575CCE9F165E82628CD030362"></div>
<div class="siteName">12</div>
</div>

</div>

<canvas id="mapcanvas" width="2370" height="1263" style="position: absolute; top: 0px; left: 28px;"></canvas>
</div>

</div>

</div>

</div>
</div>
</body>
</html>

// 重庆大屏js
$(document).ready(function(){

drawCurveLine();

});

// 动画渐变线条
let cureLineMove = {
arr: [{
start:{x:745,y:216},point:{x:718,y:137},end:{x:676,y:107},
ms:200, //速度
percent: 10, //线条动画第一次执行的起始位置
movelength: [-10, 0], //偏移长度,可为负值 [x,y] 渐变方向
}, {
start:{x:745,y:210},point:{x:118,y:65},end:{x:379,y:625},
ms: 200, //速度
percent: 20, //线条动画第一次执行的起始位置
movelength: [-50, 50], //偏移长度,可为负值 [x,y] 渐变方向
}, {
start:{x:805,y:214},point:{x:830,y:317},end:{x:806,y:385},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [10, 10], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:805,y:214},point:{x:1109,y:388},end:{x:950,y:565},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [20, 20], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:805,y:214},point:{x:1227,y:359},end:{x:1334,y:643},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [50, 50], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:805,y:214},point:{x:1187,y:359},end:{x:1334,y:805},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [50, 50], //偏移长度,可为负值 [x,y]//渐变方向

}, {
start:{x:807,y:565},point:{x:838,y:434},end:{x:880,y:352},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [20, 0], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:810,y:570},point:{x:701,y:900},end:{x:891,y:1001},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [30, 30], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:1308,y:412},point:{x:1407,y:203},end:{x:1652,y:97},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [50, 0], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:1308,y:412},point:{x:1502,y:263},end:{x:1743,y:212},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [50, 0], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:1134,y:890},point:{x:654,y:1002},end:{x:450,y:262},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [-50, 0], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:1134,y:890},point:{x:704,y:942},end:{x:619,y:427},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [-50, 0], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:1135,y:887},point:{x:1084,y:803},end:{x:1020,y:823},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [-50, 0], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:1135,y:887},point:{x:1150,y:731},end:{x:1087,y:674},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [0, -50], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:1780,y:954},point:{x:1500,y:1122},end:{x:1260,y:1113},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [-30, 30], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:888,y:996},point:{x:830,y:831},end:{x:929,y:714},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [-30, -30], //偏移长度,可为负值 [x,y]//渐变方向
}, {
start:{x:953,y:1006},point:{x:1079,y:1251},end:{x:1319,y:1177},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [50, 0], //偏移长度,可为负值 [x,y]//渐变方向
},{
start:{x:1377,y:1186},point:{x:2247,y:1081},end:{x:1905,y:322},
ms: 200, //速度毫秒
percent: 50, //线条动画第一次执行的起始位置
movelength: [100, -100], //偏移长度,可为负值 [x,y] 渐变方向
}, {
start:{x:987,y:714},point:{x:1005,y:525},end:{x:1847,y:318},
ms: 200, //速度
percent: 50, //线条动画第一次执行的起始位置
movelength: [80, -80], //偏移长度,可为负值 [x,y]//渐变方向
}, ],
ctx: null,
style:{strokeStyle:'#1a5e56',},
gradients:{addColorStop1:["0","#27fd03"]},
fn: null,
}

// 绘画站点线及线上字体

function drawCurveLine(perfData){
var canvas = document.getElementById("mapcanvas");
var context = canvas.getContext("2d");

// 绘画动态线
cureLineMove.ctx =context;
cureLineMove.fn = context.drawAnimateBezierCurve.bind(cureLineMove),
cureLineMove.fn();

// 鼠标定位画布位置
canvas.addEventListener("click",function _handler_(evt){
var x = evt.clientX;
var y = evt.clientY;
var rect = canvas.getBoundingClientRect();
x-= (rect.left);//+40
y-= (rect.top);//+40
console.log("线：{x:"+parseInt(x)+",y:"+parseInt(y)+"}"+" 点： left:"+parseInt(x-20)+"px;top:"+parseInt(y-20)+"px; ");
})
}

/**
* 绘画样式
* @param context 容器
* @param width 宽度
* @param start 开始节点
* @param point 拐点
* @param end 结束节点
* @param isGradient 是否渐变
*/
function drawBezierLineDash(context1,width,start,point,end,isGradient){

const gradient = context1.createLinearGradient(start.x, start.y, end.x, end.y);
//context1.setLineDash([15,5]);

context1.moveTo(start.x,start.y);
context1.quadraticCurveTo(point.x,point.y,end.x,end.y);
if(isGradient){
context1.lineWidth= 14;
gradient.addColorStop(1,"#27fd03"); // 尾部颜色
}else {
/*context1.lineWidth= 2;
/!*gradient.addColorStop(0,"#e5662c"); // 头部颜色
gradient.addColorStop(0.2,"#cd802c"); // 中部颜色*!/
gradient.addColorStop(1,"#5ddd3a58"); // 尾部颜色*/
}
context1.strokeStyle = gradient;
return context1;
}

/**
* 拓展canvas属性或方法
*
*/

/**
*
* 静态绘画贝塞尔曲线及绘画流动曲线
*/
CanvasRenderingContext2D.prototype.drawAnimateBezierCurve = function () {
let ctx = this.ctx;
let style = this.style;
let gradients = this.gradients;

// ctx.clearRect(0, 0, 1500, 1500); //清除
for (let i = 0; i < this.arr.length; i++) {
const item = this.arr[i]
let start = item.start;
let point = item.point;
let end = item.end;
if (start == undefined){
continue;
}
ctx.drawBezierCurvePath(
ctx,
start, // 开始点
point,
end, // 结束点
this.arr[i].percent / this.arr[i].ms,
this.arr[i].movelength,
style,
gradients,
);

ctx.stroke();

this.arr[i].percent = (this.arr[i].percent + 1) % this.arr[i].ms
}

requestAnimationFrame(ctx.drawAnimateBezierCurve.bind(this)); //类似于setInterval 浏览器按照屏幕刷新率执行函数

}

/**
* 绘画贝塞尔曲线,可虚线可实线
* @param {Object} ctx
* @param {Object} start
* @param {Object} end
* @param {Object} speed 速度/第一次执行位置= 每帧的移动距离
* @param {Object} movelength 偏移长度，渐变动画大小
* @param {Object} style 线条底色
* @param {Object} gradients 流动点渐变色
*/
CanvasRenderingContext2D.prototype.drawBezierCurvePath = function (ctx, start,point, end, speed, movelength,style,gradients) {

ctx.beginPath();
ctx.lineWidth= 1;
ctx.moveTo(start.x, start.y);
if(style.strokeStyle){
ctx.strokeStyle = style.strokeStyle;//'#1a5e56'
}else{
ctx.strokeStyle = "#fff";
}
if(style.setLineDash){
ctx.setLineDash ([style.setLineDash[0],style.setLineDash[1]]);;//'#1a5e56'
}else{
ctx.setLineDash([1,0]);
}
ctx.quadraticCurveTo(point.x, point.y, end.x, end.y);
ctx.stroke();
ctx.beginPath();
ctx = $.extend(ctx,style);

let p0 = start;
let p1 = point;
let p2 = end;

let v01 = {x:(p1.x - p0.x), y:(p1.y - p0.y)}; // 向量<p0, p1>
let v12 = {x:(p2.x - p1.x), y:(p2.y - p1.y)}; // 向量<p1, p2>

let q0 = {x:(p0.x + v01.x * speed),y: (p0.y + v01.y * speed)};
let q1 = {x:(p1.x + v12.x * speed),y:( p1.y + v12.y * speed)};

let v = {x:(q1.x - q0.x), y:(q1.y - q0.y)}; // 向量<q0, q1>

let b = {x:(q0.x + v.x * speed),y: (q0.y + v.y * speed)};

/**
*绘画渐变贝塞尔曲线，可虚线可实线
* @param context1
* @param start
* @param point
* @param end
* @param style
* @param gradients
* @returns {*}
*/
CanvasRenderingContext2D.prototype.drawBezierLine = function (context1,start,point,end,style,gradients) {
const gradient = context1.createLinearGradient(start.x, start.y, end.x, end.y);
if(style.lineWidth){
context1.lineWidth = style.lineWidth;
}else{
context1.lineWidth = 1;
}
if(style.setLineDash){
context1.setLineDash ([style.setLineDash[0],style.setLineDash[1]]);;//'#1a5e56'
}else{
context1.setLineDash([15,5]);// 虚线 1,0 实线
}
context1.moveTo(start.x,start.y);
context1.quadraticCurveTo(point.x,point.y,end.x,end.y);
if(gradients.addColorStop1){
gradient.addColorStop(gradients.addColorStop1[0], gradients.addColorStop1[1]);
}else if(gradients.addColorStop2){
gradient.addColorStop(gradients.addColorStop2[0], gradients.addColorStop2[1]);
}else if(gradients.addColorStop3){
gradient.addColorStop(gradients.addColorStop3[0], gradients.addColorStop3[1]);
}else{
gradient.addColorStop("0", "#27fd03");
}
context1.strokeStyle = gradient;
return context1;
}

</script>

yessica__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘画流动贝塞尔渐变曲线，三点绘画一条线

console.log("线：{x:"+parseInt(x)+",y:"+parseInt(y)+"}"+" 点： left:"+parseInt(x-20)+"px;// 向量movelength: [-30, -30], //偏移长度,可为负值 [x,y]//渐变方向。movelength: [-30, 30], //偏移长度,可为负值 [x,y]//渐变方向。movelength: [80, -80], //偏移长度,可为负值 [x,y]//渐变方向。
复制链接

扫一扫