Canvas 通过改变渐变色渐变百分比位置做飞线效果

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Canvas 通过改变渐变色渐变百分比位置做飞线效果</title>
</head><body><canvas id="myCanvas" width="700" height="700" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas id="myCanvas2" width="700" height="700" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><script>$(function () {var myAction = {};$.extend(myAction, {getWidth: function (pointA, pointB) {var xWidth = (pointA.x - pointB.x) * (pointA.x - pointB.x);var yWidth = (pointA.y - pointB.y) * (pointA.y - pointB.y)var edgeWidth = Math.sqrt( xWidth + yWidth );return 100 / edgeWidth ;},initCanvas1: function () {var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var start = 0;var pointA = {x: 0,y: 100};var pointB = {x: 700,y: 100};    var width = myAction.getWidth(pointA, pointB);function auto() {ctx.beginPath();ctx.moveTo(0, 100);ctx.lineTo(700, 100);var grd = ctx.createLinearGradient(pointA.x, pointA.y, pointB.x, pointB.y);grd.addColorStop(0, "#5BC0DE");grd.addColorStop(start, "#5BC0DE");grd.addColorStop(start + (width / 2), "#ffff00");grd.addColorStop(start + width, "#5BC0DE");grd.addColorStop(1, "#5BC0DE");ctx.lineWidth = 5;ctx.strokeStyle = grd;ctx.stroke();console.log(start + width)ctx.closePath();  if (start + width + 0.02 >= 1) {start = 0;} else {start = start + 0.02;}setTimeout(function() {auto();}, 100);        }auto();                }, initCanvas2: function () {var c = document.getElementById("myCanvas2");var ctx = c.getContext("2d");var start = 0;var pointA = {x: 0,y: 0};var pointB = {x: 700,y: 700};      var width = myAction.getWidth(pointA, pointB);function auto() {ctx.beginPath();var grd = ctx.createLinearGradient(pointA.x, pointA.y, pointB.x, pointB.y);grd.addColorStop(0, "#5BC0DE");grd.addColorStop(start, "#5BC0DE");grd.addColorStop(start + (width / 2), "#ffff00");grd.addColorStop(start + width, "#5BC0DE");grd.addColorStop(1, "#5BC0DE");ctx.lineWidth = 5;ctx.strokeStyle = grd;ctx.moveTo(0, 0);ctx.lineTo(700, 700);   ctx.stroke();ctx.closePath();  if (start + width + 0.02 >= 1) {start = 0;} else {start = start + 0.02;}setTimeout(function() {auto();}, 100);        }auto();                }});var init = function () {myAction.initCanvas1();myAction.initCanvas2();}();});</script><script></script>
</body>
</html>

转载于:https://www.cnblogs.com/xutongbao/p/9924817.html

Canvas 通过改变渐变色渐变百分比位置做飞线效果相关推荐

canvas绘制飞线效果
在我们做的可视化大屏项目中,经常会遇到飞线的效果. 在我们的大屏编辑器中,可以通过拖拽+配置参数的方式很快就能够实现.下面是我们使用大屏编辑器实现的一个项目效果: 中间地图就有飞线的效果. 抛开编辑器 ...
echarts切换飞线图未清空_echarts做飞线图
飞线图 height:100%; } body{ height:100%; margin:0; padding:0; background-color:#2F4056; } const xhr= ne ...
opencv 调整窗口大小_opencv改变imshow窗口大小,窗口位置的方法
opencv改变imshow窗口大小,窗口位置的方法如下所示: cv2.HoughLinesP cv2.namedWindow("enhanced",0); cv2.resize ...
html 控件坐标定位,利用JS改变html控件位置
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 利用JS改变html控件位置我想写一个贪吃蛇小游戏,所以需要完成蛇的自动移动效果,这就需要改变html控件位置.本来我 ...
HTML5绘制渐变直线,如何使用HTML5 Canvas绘制动态线性渐变
如果要使用HTML5 Canvas绘制线性渐变,需要用到createLinearGradient()方法.下面我们就来一起看看具体的内容. createLinearGradient() createL ...
Canvas画图设置渐变色
1.线形图设置填充色为渐变色方法: /*** Draws the provided path in filled mode with the provided drawable.** @param c ...
swif 在字符串中查找特定字符索引以及改变字符串的指定位置的颜色字体大小
1 第一种方式 var text = "谁包含这个字母";let range:Range<String.Index> = text.range(of: "含& ...
放射性渐变色html,html5 canvas绘制放射性渐变色效果
效果图展示: canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错.... 这里用到了createRadialGradient这 ...
Canvas如何设置一个渐变背景（支持从纯色切换到渐变，从渐变又切换到纯色)
Canvas如何设置一个渐变背景(支持从纯色切换到渐变,从渐变又切换到纯色) Canvas背景设置在开发中遇到一个需求:点击按钮切换canvas的背景,要求是从纯色到渐变,渐变到纯色.开发的时候发现 ...
HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
绘制渐变渐变是一种很普遍的视觉形象,能带来视觉上的舒适感.在Canvas中,绘图API提供了两个原生的渐变方法,包括线性渐变和径向渐变.渐变,在颜色集上使用逐步抽样的算法,可以应用的描边样式和填充样 ...

Canvas 通过改变渐变色渐变百分比位置做飞线效果

Canvas 通过改变渐变色渐变百分比位置做飞线效果相关推荐

最新文章

热门文章