波浪形摆动幅度动画
代码语言:html
所属分类:视觉差异
代码描述:波浪形摆动幅度动画
代码标签: 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en" class=""> <head> <meta charset="UTF-8"> <style> body { overflow: hidden; background-color: #000; } </style> </head> <body> <canvas id="c" width="707" height="362"></canvas> <script> let ctx = c.getContext("2d"); let cw = c.width = window.innerWidth; let ch = c.height = window.innerHeight; let w = 7; let H = 25; let arrowLength = 100; let rid = null; class Arrow { constructor(pos, a, n) { this.pos = pos; this.a = a; this.n = n; } draw() { let h = H * Math.cos(this.a); ctx.save(); ctx.translate(this.pos.x, this.pos.y); //line ctx.globalCompositeOperation = "destination-over"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, arrowLength); ctx.strokeStyle = this.n % 2 == 0 ? "coral": "Cyan"; ctx.stroke(); if (this.n % 2 == 0) { ctx.globalCompositeOperation = "source-over"; ctx.strokeStyle = "#ddd"; ctx.lineCap = "round"; //arrow 1 ctx.beginPath(); ctx.moveTo(-w, h); ctx.lineTo(0,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0