前言

着重点在：位置的选择和色彩的选择

原版代码

暴力美学

<canvas></canvas>
<script>
// 事件的定义
// 如果使用触摸屏，当滚动时，将会阻止事件发生
document.addEventListener('touchmove', event => event.preventDefault());// 获取canvas画板对象，并进行基础设置的赋值
var c = document.getElementsByTagName('canvas')[0],x = c.getContext('2d'),pr = window.devicePixelRatio || 1,w = window.innerWidth,h = window.innerHeight,f = 90,q,m = Math,r = 0,u = m.PI*2,v = m.cos,z = m.random// canvas画板的长宽设置
c.width = w*pr
c.height = h*pr// 对画板里的内容进行放大
x.scale(pr, pr)
// 图像透明度设置
x.globalAlpha = 0.6// 清理出空间供绘图使用
function i(){x.clearRect(0,0,w,h)//三角形的起始坐标// f为初始值q=[{x:0,y:h*.7+f},{x:0,y:h*.7-f}]//第二个三角形的横坐标在范围内，就开始绘图while(q[1].x<w+f) d(q[0], q[1])
}function d(i,j){   // 开始绘画x.beginPath()// 连线两顶点x.moveTo(i.x, i.y)x.lineTo(j.x, j.y)// 求取第3个顶点var k = j.x + (z()*2-0.25)*f,n = y(j.y)x.lineTo(k, n)x.closePath()r-=u/-50x.fillStyle = '#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16)x.fill()q[0] = q[1]q[1] = {x:k,y:n}
}function y(p){var t = p + (z()*2-1.1)*freturn (t>h||t<0) ? y(p) : t
}document.onclick = i
document.ontouchstart = i
i()</script>

自用版本

符合个人使用习惯

<canvas></canvas>
<script>
document.addEventListener('touchmove', event => event.preventDefault());let ctx = document.getElementsByTagName('canvas')[0],c = ctx.getContext('2d'),basePixel = window.devicePixelRatio || 1,width = window.innerWidth,height = window.innerHeight,startOffset = 90,coordinateArr,startRadius = 0,radius = Math.PI * 2;ctx.width = width * basePixel,
ctx.height = height * basePixel;c.scale(basePixel, basePixel),
c.globalAlpha = 0.6;// 事件调用
// 点击重绘和拖动重绘
document.onclick = initialPotray;
document.ontouchstart = initialPotray;
// 如果没有事件发生，初始绘制
initialPotray();function initialPotray(){c.clearRect(0,0,width,height);// first// 基于0.7height的位置对称coordinateArr = [    {x:0, y: height * .7 + startOffset},{x:0, y: height * .7 - startOffset}];// 让最后一个点跑出去，不至于最后狭小while(coordinateArr[1].x < width + startOffset) drawTraingleImage(coordinateArr[0],coordinateArr[1]);
}function drawTraingleImage(coor1,coor2){c.beginPath();c.moveTo(coor1.x, coor1.y);c.lineTo(coor2.x, coor2.y);// x取值在x2+[-22.5,157.5]，如果大于宽度，跳出循环// y在y2+[-22.5,157.5]之间，如果大于高度，重新抽取let coor3 = {x: coor2.x + (Math.random()*2 - 0.25) * startOffset,y: reCalculate(coor2.y)};c.lineTo(coor3.x, coor3.y);c.closePath();startRadius -= radius / -50;// RGB转换// 内容数字可改c.fillStyle = '#' + (Math.cos(startRadius)*127 + 128<<16 |Math.cos(startRadius + radius/3)*127 + 128<<8 |Math.cos(startRadius + radius/3 * 2)*127 + 128).toString(16);c.fill();// 更换坐标coordinateArr[0] = coordinateArr[1],coordinateArr[1] = coor3;
}function reCalculate(yNum){let tmp = yNum + (Math.random()*2 - 1.1) * startOffset;return (tmp > height || tmp < 0) ? reCalculate(yNum) : tmp;
}</script>

结果展示

canvas-vue彩色丝带展示相关推荐

canvas将彩色图片变为灰度图片理解问题
一.问题发现在阅读<JavaScript DOM 编程艺术>时,文中运用canvas将彩色图片变成灰度图片,有一部分代码段不太理解. 二.问题解决 getImageData方法返回每一个 ...
vue大屏展示高度自适应
vue大屏展示获取当前屏幕盖度 <template><div ref="bigshow"></div> &l ...
vue实现人员展示页面
vue实现人员展示页面功能描述实现人员展示实现无限滚动添加 display.vue <template><div class="display">&l ...
Vue 实现全景图展示
Vue 实现全景图展示全景图需要用鱼眼相机拍(720度),手机拍出来的会有折痕下载依赖 npm install three --save npm install photo-sphere-view ...
Vue 彩色头像|一个有趣的头像生成器附源码
前言这是一款矢量风格的头像生成器,您可以搭配不同的素材组件,生成属于您自己的个性化头像. 介绍您可能感兴趣的功能: 可视化组件配置栏随机生成头像重做/撤消国际化批量生成多个头像在线体验 ...
web前端：canvas动画彩色气泡，原生js类直播间点赞效果实现
1.气泡事件-随机位置/颜色梦幻全屏 1.less * {margin: 0;padding: 0;}html {height: 100%;overflow: hidden;body {height: ...
ArcGIS API+Canvas +Vue框架制作前端地图打印功能
将ArcGIS Pro 桌面打印制图功能搬到前端页面上实现BS端打印制图功能简介地图框冲突拖拽放大缩小标题图例图例储存图例获取图例摆放比例尺 scale属性格式化指北针预 ...
vue+three.js展示nrrd+vtk3D模型-vue框架集成(下)
nrrd3D模型文件.vtk3D模型文件vue如何使用话不多说,直接上图小白的坎坷路程网上资源视频关于nrrd模型和vtk模型是真的少,公司都没有接触过这方面,职场小白, 累死了要.大家有同感可 ...
Vue关于pdf展示问题——第三方电子签章不能正常展示
在项目开发过程中,如果我们只需要展示pdf,那么我们可以选择vue-pdf,可以查看我之前的一篇:https://blog.csdn.net/AnnaF/article/details/1058660 ...

canvas-vue彩色丝带展示

文章目录

前言

推荐阅读

原版代码

自用版本

结果展示

canvas-vue彩色丝带展示相关推荐

最新文章

热门文章