随笔分类 -  JS.Canvas

【Canvas】绘制直方图例子
摘要：放一个Canvas绘制直方图的例子在这里，以备日后不时之需。 先上图： 代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head 阅读全文
posted @ 2022-01-15 12:12 不朽的飞翔 阅读(175) 评论(0) 推荐(0)
【Canvas】外摆线轨迹
摘要：把摆线的水平面换成圆，便形成了圆外摆线，如图： 代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>圆外摆 阅读全文
posted @ 2022-01-14 09:46 不朽的飞翔 阅读(151) 评论(0) 推荐(0)
【Canvas】内摆线轨迹
摘要：代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>圆内摆线模拟</title> <style type= 阅读全文
posted @ 2022-01-14 09:44 不朽的飞翔 阅读(139) 评论(0) 推荐(0)
【Canvas】摆线模拟
摘要：摆线是轮上一点的轨迹，又称最快降速线。 先上图： 代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>摆线 阅读全文
posted @ 2022-01-13 11:21 不朽的飞翔 阅读(83) 评论(0) 推荐(0)
【Canvas】十八世纪火炮实心球弹发射轨迹模拟
摘要：先上图： 代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>十八世纪火炮实心球弹发射轨迹模拟</titl 阅读全文
posted @ 2022-01-12 11:05 不朽的飞翔 阅读(114) 评论(0) 推荐(0)
【Canvas】狗撵兔子和贝塞尔曲线
摘要：先上图： 代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>狗撵兔子与贝塞尔曲线</title> <st 阅读全文
posted @ 2022-01-12 09:51 不朽的飞翔 阅读(104) 评论(0) 推荐(0)
【Canvas】勾画二次曲线
摘要：效果： 代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>二次曲线控制板</title> <style 阅读全文
posted @ 2022-01-12 09:51 不朽的飞翔 阅读(66) 评论(0) 推荐(0)
【Canvas】30度三角板绕45度三角板旋转，求角平分线夹角的问题
摘要：题目：三角形AOB为等腰直角三角板，COD为30度之三角板，OD从OA开始顺时针旋转，OM为AOC角平分线，ON为BOD角平分线，求MON度数。 图示： 代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" c 阅读全文
posted @ 2022-01-09 09:16 不朽的飞翔 阅读(263) 评论(0) 推荐(0)
【Canvas】将屏幕坐标系转换成笛卡尔坐标系
摘要：Canvas绘图里的坐标系是左上角为原点，向右为X正向，向下为Y正向，这被称为屏幕坐标系； 如果绘制的内容和几何无关，屏幕坐标系倒也没什么，熟悉了也就好了； 但如果要重现几何问题，那人工变换来变换去既伤脑筋，也没必要。 我们可以在绘制之前将ctx变换好，代码如下： // 进行屏幕坐标系到笛卡尔坐标系 阅读全文
posted @ 2022-01-09 09:16 不朽的飞翔 阅读(1060) 评论(0) 推荐(0)
【Canvas】锯锯齿左右开门效果
摘要：源码下载：https://files.cnblogs.com/files/heyang78/imma220107.rar 如果不知道锯锯齿左右开门效果为何物，请看下面三张效果图： 1. 2. 3. 代码： <!DOCTYPE html> <html lang="utf-8"> <meta http- 阅读全文
posted @ 2022-01-09 09:15 不朽的飞翔 阅读(53) 评论(0) 推荐(0)
【Canvas】线性渐变色例子-垂直方向渐变
摘要：<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>线性渐变色例子-垂直方向渐变</title> </head> 阅读全文
posted @ 2022-01-09 09:14 不朽的飞翔 阅读(181) 评论(0) 推荐(0)