js
关注
分享
扫一扫
会宇
坚持哦
展开
-
HTML JS农历
HTML JS 实现农历, 最多计算周期 1900-2100 <!DOCTYPE html> <head> <title>LunarCalendar</title> </head> <body> </body> <script> /** * 阴历 */ function LunarCalendar(year, month, day){ this.ye原创 2021-08-15 12:25:07 · 619 阅读 · 0 评论 -
html js 计算两个点之间的角度
用到的函数 Math.atan2(y, x); 这里是先写入y的坐标, 在写入x的坐标, 不要写反了 var radian = Math.atan2(y1 - y2, x1 - x2); // 返回来的是弧度 var angle = 180 /Math.PI * radian; // 根据弧度计算角度原创 2021-02-09 00:35:39 · 4642 阅读 · 0 评论 -
用 html canvas的getImageData()方法获取输入文字的xy坐标
用getImageData() 方法返回一个ImageData类, 循环类里的data数组, 其中数组的数量是canvas的宽度 * 高度 * 4 得来的 乘4是因为图片是rgba颜色组成的 1代表r, 2代表g, 3代表b, 4代表透明度 例如想获取canvas画图 x0 y0 的颜色就可以这样写: var imageData = ctx.getImageData(e.x, e.y, e.x, e.y); alert("rgba(" + imageData.data[0] + ", " + ima.原创 2021-02-07 22:20:49 · 1064 阅读 · 0 评论 -
html canvas 圆旋转
<html> <head> <title圆旋转</title> <style> *{ padding: 0; margin: 0; } canvas{ background-color: blac...原创 2021-02-05 19:47:18 · 668 阅读 · 0 评论 -
html canvas 水波纹
原理就是每个小圆都在自己围绕一个大圆做旋转, 只要让他们的初始角度不一样组合在一起看上去就像是在运动, 只要一直观察其中一个圆他们都在公转 <!DOCTYPE html> <html> <head> <title>index.html</title> </head> <body> This is my HTML page. <br> &l...原创 2021-01-27 22:33:17 · 343 阅读 · 2 评论 -
html canvas js 扇形统计
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>扇形图</title> <style> canvas{ border: 1px solid #A4E2F9; } </style> <script type="text/javascript"> </script> </head&...原创 2020-08-13 10:54:01 · 500 阅读 · 0 评论 -
html js canvas 实现 钟表
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style> canvas{ display: block; margin: auto; border: 1px solid #CCC; } </style> ...原创 2020-08-11 13:11:20 · 382 阅读 · 2 评论 -
html canvas 2d 正方形 顺时针逆时针 四个角度旋转
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style> canvas{ display: block; margin: auto; border: 1px solid #CCC; } .buttons{f...原创 2020-08-07 13:09:31 · 1303 阅读 · 0 评论 -
html5 canvas 烟花
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m...原创 2019-04-20 08:30:38 · 1242 阅读 · 0 评论 -
html5 canvas 点击放烟花
在网上仿照大神写的, 用谷歌浏览最好 代码里调用 run() 可实现带线的烟花, 点击canvas生成一朵烟花 右击canvas清空一次画布 双击canvans生成一朵带线的随机烟花 代码里我将clear()方法隐藏掉了, 所以不会每一帧都清空画布 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E...原创 2019-04-19 15:20:13 · 2626 阅读 · 0 评论 -
html canvas 球和线
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m...原创 2019-04-18 11:51:45 · 229 阅读 · 0 评论 -
js 实现长按事件1
JavaScript实现长按事件 这方式太粗暴 , 肯定还有简单的方式请朋友们告知 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www....原创 2018-11-16 10:30:30 · 2247 阅读 · 0 评论 -
html5 3d 盒子(初级)
<!DOCTYPE html> <html> <head> <style> #threeDiv{transform-style:preserve-3d;transform:rotateX(0deg) rotateY(0deg); width:100px;height:100px;position:relative;margin:auto;top:16...原创 2018-05-05 10:24:46 · 1601 阅读 · 0 评论 -
js ondragstart 拖动事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met原创 2018-04-08 17:20:35 · 2876 阅读 · 0 评论