当前位置：首页 > news >正文

自己做的网站只能打开一个链接/如何做好营销推广

news 2025/7/30 1:36:31

自己做的网站只能打开一个链接,如何做好营销推广,哪些网站用c 做的,武汉有几家做蔬菜配送的网站利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果前言近日公司接到一个轨道系统的需求，需要将地铁线路及列车实时位置展示在大屏上。既然是大屏项目，那视觉效果当然是第一重点，咱们可以先来看看项目完成后的效果图。可以看到中间线路里…

利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

前言

近日公司接到一个轨道系统的需求，需要将地铁线路及列车实时位置展示在大屏上。既然是大屏项目，那视觉效果当然是第一重点，咱们可以先来看看项目完成后的效果图。

可以看到中间线路里轨道的效果是非常炫酷的，那么本文的主要内容就是讲解如何在canvas上绘制出这种效果。

分析设计稿

先看看设计稿中的轨道效果

程序员解决问题时经常喜欢用到的方法是把一个大问题拆解为若干个小问题然后逐一处理，也就是分而治之，所以我在思考这个轨道效果的实现时，也是先考虑到将它拆解。根据设计稿我们可以看到这个线路实际上是由外层的空心线+发光效果+内层的斑马线+倒影组成的，所以我们要做的就是如何处理这几个小问题。

实现效果

绘制空心线与发光效果

绘制空心线时我们需要利用到[CanvasRenderingContext2D.globalCompositeOperation](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)这个属性，详细原理可以查看canvas 绘制双线技巧，本文不再做赘述。了解实现原理之后动手就很容易了，简述思路就是: 通过ctx.globalCompositeOperation = "destination-out"绘制空心线，再利用canvas的阴影配置来模拟发光的效果。直接上代码：

//  获取页面里的画布元素和其上下文对象
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//  由于ctx.globalCompositeOperation = "destination-out"会影响到画布上已有的图像
//  所以需要先创建一个离屏canvas，把空心线绘制到离屏canvas上，再将离屏canvas绘制到页面的画布中
var tempCanvas = document.createElement("canvas");
tempCanvas.width = 800;
tempCanvas.height = 800;
var tempCtx = tempCanvas.getContext("2d");
//  创建坐标点用来连线
var points = [createPoint(50, 50), createPoint(500, 50), createPoint(500, 500)];
//  配置参数
var options = {color: "#03a4fe", //  轨道颜色lineWidth: 26,    //  总宽度borderWidth: 8,   //  边框宽度shadowBlur: 20,   //  阴影模糊半径
};
paint(ctx, points, options);
//  绘制
function paint(ctx, points, options) {paintHollow(tempCtx, points, options);//    将离屏canvas绘制到页面上ctx.drawImage(tempCanvas, 0, 0);
}
/*** 绘制空心线* @param {*} ctx 画布上下文* @param {*} points 坐标点的集合* @param {*} options 配置 */
function paintHollow(ctx,points,{ color, lineWidth, borderWidth, shadowBlur }
) {//  连线paintLine(ctx, points);//    添加配置参数ctx.lineWidth = lineWidth;ctx.strokeStyle = color;ctx.lineCap = "round";ctx.lineJoin = "round";//    利用阴影ctx.shadowColor = color;ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 0;ctx.shadowBlur = shadowBlur;ctx.stroke();ctx.globalCompositeOperation = "destination-out";ctx.lineWidth -= borderWidth;ctx.strokeStyle = color;ctx.stroke();ctx.globalCompositeOperation = "source-over";
}
/*** 根据点位绘制连线* @param {*} ctx 画布上下文* @param {Array} points 坐标点的集合*/
function paintLine(ctx, points) {var pointIndex = 0,p0,value,pointCount = points.length;p0 = points[0];ctx.beginPath();ctx.moveTo(p0.x, p0.y);for (pointIndex = 1; pointIndex < pointCount; pointIndex++) {value = points[pointIndex];ctx.lineTo(value.x, value.y);}
}

效果图

绘制倒影

可以看到设计稿里的倒影效果就是在轨道下方再次绘制了一条透明度较低的空心线，所以这里实现起来就比较简单了，稍微改造一下paintHollow方法就可以。

/*** 绘制空心线* @param {*} ctx 画布上下文* @param {*} points 坐标点的集合* @param {*} options 配置* @param {*} isReflect 当前绘制的是否是倒影效果*/
function paintHollow(ctx,points,{ color, lineWidth, borderWidth, shadowBlur, reflectOffset },isReflect = false
) {if (!isReflect) {//    绘制倒影的时候透明度降低ctx.globalAlpha = 0.5;//  通过自调绘制一个倒影效果出来paintHollow(ctx,points.map(({ x, y }) => {return { x, y: y + reflectOffset };}),{ color, lineWidth, borderWidth, shadowBlur: 0 },true);ctx.globalAlpha = 1;}//  连线paintLine(ctx, points);//    添加配置参数ctx.lineWidth = lineWidth;ctx.strokeStyle = color;ctx.lineCap = "round";ctx.lineJoin = "round";//    利用阴影ctx.shadowColor = color;ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 0;ctx.shadowBlur = shadowBlur;ctx.stroke();ctx.globalCompositeOperation = "destination-out";ctx.lineWidth -= borderWidth;ctx.strokeStyle = color;ctx.stroke();ctx.globalCompositeOperation = "source-over";
}

效果图

绘制轨道中间的斑马线效果

中间的斑马线效果我们又可以再拆分为两个部分，先绘制一条底色的连线，然后再通过lineDash属性绘制一条虚线，就可以达到设计稿上的效果了。

/*** 绘制轨道中间部分* @param {*} ctx * @param {*} points * @param {*} param2 */
function paintInner(ctx,points,{ color, innerWidth, borderWidth, innerColor, shadowBlur }
) {ctx.lineCap = "round";ctx.lineJoin = "round";paintLine(ctx, points);ctx.lineWidth = innerWidth;ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 0;ctx.shadowBlur = shadowBlur;ctx.strokeStyle = innerColor;ctx.shadowColor = color;//  先根据中间部分的颜色绘制一条线出来ctx.stroke();ctx.lineCap = "butt";ctx.setLineDash([5, 15]);ctx.lineDashOffset = 0;const { r, g: green, b } = getRgba(color);//  再根据轨道的主色调绘制一条透明度较低的虚线ctx.strokeStyle = `rgba(${r},${green},${b},0.4)`;ctx.stroke();
}
/*** 获取一个颜色值的r,g,b,a* @param {*} color */
function getRgba(color) {if (!canvas1 || !ctx1) {canvas1 = document.createElement("canvas");canvas1.width = 1;canvas1.height = 1;ctx1 = canvas1.getContext("2d");}canvas1.width = 1;ctx1.fillStyle = color;ctx1.fillRect(0, 0, 1, 1);const colorData = ctx1.getImageData(0, 0, 1, 1).data;return {r: colorData[0],g: colorData[1],b: colorData[2],a: colorData[3],};
}

效果图