js实现粒子烟雾绘制人物图像动画效果代码
代码语言:html
所属分类:粒子
代码描述:js实现粒子烟雾绘制人物图像动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: black; } canvas { position: absolute; top: 50%; left: 50%; width: 522px; height: 353px; transform: translate(-50%, -50%); border: 1px solid black; } footer { font-family: monospace; width: 100%; color: white; font-size: 15px; margin-left: 5px; text-shadow: 1px 1px 1px #737373; position: absolute; bottom: 0; width: 95%; text-align: center; padding-bottom: 15px; } footer a { color: orangered; } </style> </head> <body> <canvas id="canvas1"></canvas> <script> const image = new Image(); image.src = 'data:image/jpeg;base64,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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0