![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Canvas
KatyLight
前端工程师
展开
-
Canvas随机冒泡背景
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> @font-face { } body{ padding: 0; margin: 0; background-color: black; col...原创 2022-01-19 16:58:58 · 332 阅读 · 0 评论 -
Canvas游戏2048自由地图大小
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-color: black; color: white; } </style> <script> let n...原创 2022-01-19 16:14:39 · 139 阅读 · 0 评论 -
Canvas游戏下百层
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { background-color: black; padding: 0; margin: 0; } </style> <scri...原创 2022-01-19 10:28:41 · 2755 阅读 · 0 评论 -
Canvas打飞机游戏
打飞机.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { background-color: black; padding: 0; margin: 0; } </style> ...原创 2022-01-14 10:36:57 · 99 阅读 · 0 评论 -
Canvas下落钢琴小游戏
小圆圈掉落的时候,就会按键消灭圆圈。DFJK是按键。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { padding: 0; margin: 0; background-color: black; }..原创 2022-01-13 15:13:49 · 2603 阅读 · 0 评论 -
【工具】JS闪光钻石进度条
先上图:会随着对对象设置值,出现动画,适用于某些用途。组件下载地址:组件库: 丰富组件库原创 2022-01-11 13:23:52 · 208 阅读 · 0 评论 -
canvas处理图像改色(透明度、黑白)
canvas处理图像改色(透明度、黑白)原创 2021-12-31 15:33:39 · 3728 阅读 · 0 评论 -
canvas动画:圆圈散步
黑色的小球会移动到圆圈内,每当移动到圆圈内,圆圈就会重新定位,黑色小球就会重新寻找,很适合练手。圆圈散步.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> let p1={ x:100, y:100 } le.原创 2021-12-31 10:28:53 · 253 阅读 · 0 评论 -
Canvas动画下落雪花与下落星星
雪花.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> let c=null; let ctx; let star=[]; function createStar(){ for(let i=0;i<99...原创 2021-12-31 10:26:44 · 134 阅读 · 0 评论 -
Canvas动画彩色小球下落
彩色小球.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> let c=null; let ctx; let star=[]; function createStar(){ for(let i=0;i<300...原创 2021-12-31 10:36:33 · 307 阅读 · 0 评论 -
Canvas星空
Canvas星空居中穿越效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> let c=null; let ctx; let star=[]; let center={ x:500, y:500 ...原创 2021-12-31 13:34:00 · 82 阅读 · 0 评论 -
Canvas图片下落
先上图片效果:这里是代码,支持动态修改图片,通过选择文件更图片链接形式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> let c=null; let ctx; let star=[]; let image; f..原创 2021-12-31 15:03:53 · 525 阅读 · 0 评论