html canvas 绘制倒影,canvas

系统管理员 2022-10-10 06:24 258阅读 0赞

JavaScript

let t = 0;

const colors = \["\#161616", "\#cf894c", "\#c74962"\];

const canvas = document.getElementsByTagName("canvas")\[0\];

const ctx = canvas.getContext("2d");

const drawLine = (i, sz) => \{

const ym = (canvas.height - sz) / 2;

const y0 = canvas.height / 2;

const y = (t + i) % (sz / 2);

const h = ((y / ym) \* sz) / 40;

ctx.beginPath();

ctx.fillStyle = colors\[0\];

ctx.fillRect(0, y + y0, canvas.width - 1, h);

\};

const drawLines = (sz) => \{

const n = 9;

for (let i = 0; i < n; ++i) drawLine((sz / 2 / n) \* i, sz);

\};

const drawGradient = (sz) => \{

const x0 = (canvas.width - sz) / 2;

const y0 = (canvas.height - sz) / 2;

const y1 = (canvas.height + sz) / 2;

const gradient = ctx.createLinearGradient(x0, y0, x0, y1);

gradient.addColorStop(0, colors\[1\]);

gradient.addColorStop(0.5, colors\[1\]);

gradient.addColorStop(1, colors\[2\]);

ctx.beginPath();

ctx.fillStyle = gradient;

ctx.arc(canvas.width / 2, canvas.height / 2, sz / 2, 0, Math.PI \* 2);

ctx.fill();

\};

const drawBackground = () => \{

ctx.beginPath();

ctx.fillStyle = colors\[0\];

ctx.fillRect(0, 0, canvas.width, canvas.height);

\};

const loop = () => \{

drawBackground();

const sz = (Math.min(canvas.width, canvas.height) / 3) \* 2;

drawGradient(sz);

drawLines(sz);

t += 0.5;

requestAnimationFrame(loop);

\};

const handleResize = () => \{

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

\};

window.onresize = handleResize;

handleResize();

loop();

发表评论取消回复

表情：

评论列表（有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5——Canvas绘制曲线

Canvas绘制曲线绘制曲线绘制圆形绘制弧形二次贝塞尔

太过爱你忘了你带给我的痛/ 2023年03月01日 09:17/ 0 赞/ 298 阅读

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 259 阅读

相关 html5绘制div,HTML5 Canvas 绘制图像

canvas可以引入图像，它可以用于图片合成或者制作背景等。只要是 Gecko 支持的图像(如 PNG，GIF，JPEG等)都可以引入到 canvas 中，而且其它的 canv

本是古典何须时尚/ 2022年10月06日 13:56/ 0 赞/ 284 阅读

相关 canvas绘制七巧板

首先推荐的课程学习是《[炫丽的倒计时效果Canvas绘图与动画基础][Canvas]》，感谢liuyubobobo的讲解。偶然之间发现了这门canvas的课程，本来一直都在

落日映苍穹つ/ 2022年08月12日 01:17/ 0 赞/ 232 阅读

相关【Html5】canvas绘制圆形

上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的先截个图： ![1334153306_3907.png][]

喜欢ヅ旅行/ 2022年06月13日 11:30/ 0 赞/ 252 阅读

相关 HTML 5 Canvas 绘制图形图像

目录 HTML5 Canvas 创建一个画布（Canvas） JavaScript 绘制图像颜色、样式和阴影线条样式，矩形路径转换，文本图像绘制，

港控/mmm°/ 2022年04月17日 04:53/ 0 赞/ 380 阅读

相关 Canvas绘制曲线

文章目录圆弧贝塞尔曲线圆弧圆弧使用`arc`方法绘制，画圆的时候画的弧度是从0到2π，而想要画圆弧就调整参数只画出部分圆即可。 co

深碍√TFBOYSˉ_/ 2021年12月14日 13:49/ 0 赞/ 636 阅读

相关 canvas 绘制虚线

一.分析原理是：求出AB点之间的长度，再设置虚线的长度dashLength，把AB是我长度/虚线长度dashLength 就是虚线数量，根据虚线数量，长度就可以得到当第i个

阳光穿透心脏的1/2处/ 2021年09月12日 01:36/ 0 赞/ 517 阅读

相关 canvas绘制矩形

canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框

旧城等待，/ 2021年07月24日 21:51/ 0 赞/ 486 阅读

相关 canvas绘制直线

说明： lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。 moveTo(x, y) 将笔移动到指定的坐标x以及y上。 s

迈不过友情╰/ 2021年07月24日 16:57/ 0 赞/ 523 阅读