随笔分类 -  小案例

音视频实例--音阶导航
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding:0 ; } html,body{ height:100%; overfl 阅读全文
posted @ 2020-08-20 21:33 花未眠0619 阅读(193) 评论(0) 推荐(0)
canvas实例--手写签名
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } body,html{ height:100%; overflow 阅读全文
posted @ 2020-08-19 15:00 花未眠0619 阅读(237) 评论(0) 推荐(0)
canvas实例--马赛克矩形
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } body,html{ height:100%; overflow 阅读全文
posted @ 2020-08-19 14:40 花未眠0619 阅读(190) 评论(0) 推荐(0)
canvas实例--飞鸟
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } html,body{ height: 100%; overflo 阅读全文
posted @ 2020-08-18 20:24 花未眠0619 阅读(201) 评论(0) 推荐(1)
canvas实例--钟表
摘要：1. 初始化：将圆心调整到画布中间 由于canvas中画圆与旋转所参照的坐标轴系于正常坐标系有出入 将整个画布逆时针旋转90° 初始化一些样式数据： ctx.lineWidth=8; ctx.strokeStyle="black"; ctx.lineCap="round"; 2. 外层空心圆盘 圆盘 阅读全文
posted @ 2020-08-18 15:35 花未眠0619 阅读(163) 评论(0) 推荐(0)
canvas实例--签字
摘要：var canvas=document.querySelector('#test');if(canvas.getContext){ var ctx=canvas.getContext("2d");}canvas.onmousedown=function (ev) {ev=ev||event;if(c 阅读全文
posted @ 2020-08-18 12:22 花未眠0619 阅读(131) 评论(0) 推荐(0)
canvas实例--动态缩放
摘要：变换实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } html,body{ height: 100%; o 阅读全文
posted @ 2020-08-18 12:06 花未眠0619 阅读(352) 评论(0) 推荐(0)