自定义博客皮肤VIP专享

*博客头图：

点击选择上传的图片

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

点击选择上传的图片

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

点击选择上传的图片

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览取消提交

自定义博客皮肤

-+

上一步保存

关注公众号：jfzm_cc

关注公众号：jfzm_cc

灯光设计师

博客等级

码龄17年

32
原创

22
点赞

163
收藏

28
粉丝

关注

私信

热门文章

分类专栏

灯光学堂 1篇
技术资讯 2篇
phpcms 26篇
软件相关 3篇
html 4篇
游戏相关 1篇
JavaScript 3篇

最新评论

JavaScript如何实现点击下载图片
2501_92999019: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初中英语基础知识思维导图</title> <style> body { font-family: 'Microsoft YaHei', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin: 0; padding: 20px; min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: hidden; } .header { background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 30px; text-align: center; } .header h1 { margin: 0; font-size: 28px; font-weight: bold; } .mindmap-container { padding: 40px; display: flex; justify-content: center; align-items: center; min-height: 600px; } #mindmap { width: 100%; height: 600px; border: 1px solid #ddd; border-radius: 10px; } .controls { text-align: center; padding: 20px; background: #f8f9fa; border-top: 1px solid #eee; } .btn { display: inline-block; padding: 12px 24px; margin: 0 10px; background: #007bff; color: white; text-decoration: none; border-radius: 25px; font-size: 16px; transition: all 0.3s ease; border: none; cursor: pointer; } .btn:hover { background: #0056b3; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,123,255,0.3); } .btn-success { background: #28a745; } .btn-success:hover { background: #1e7e34; } </style> </head> <body> <div class="container"> <div class="header"> <h1>📚 初中英语基础知识思维导图</h1> <p>全面覆盖初中英语核心知识点</p> </div> <div class="mindmap-container"> <div id="mindmap"></div> </div> <div class="controls"> <button class="btn" onclick="downloadImage()">📸 下载图片</button> <button class="btn btn-success" onclick="downloadCode()">💾 下载代码</button> <button class="btn" onclick="resetMindmap()">🔄 重置视图</button> </div> </div> <script src="https://unpkg.com/d3@7"></script> <script src="https://unpkg.com/markmap-lib@0.15.4/dist/browser/index.js"></script> <script src="https://unpkg.com/markmap-view@0.15.4/dist/browser/index.js"></script> <script> // 思维导图数据 const mindmapData = { "type": "heading", "depth": 0, "content": "初中英语基础知识", "children": [ { "type": "heading", "depth": 1, "content": "📖 词汇基础", "children": [ {"type": "list_item", "content": "中考词汇量：1600-1800个"}, {"type": "list_item", "content": "常用词根词缀"}, {"type": "list_item", "content": "同义词与反义词"}, {"type": "list_item", "content": "短语动词"}, {"type": "list_item", "content": "固定搭配"} ] }, { "type": "heading", "depth": 1, "content": "🔤 语法体系", "children": [ { "type": "heading", "depth": 2, "content": "词类", "children": [ {"type": "list_item", "content": "名词：可数/不可数、单复数"}, {"type": "list_item", "content": "代词：人称、物主、反身"}, {"type": "list_item", "content": "动词：及物/不及物、规则/不规则"}, {"type": "list_item", "content": "形容词/副词：比较级、最高级"}, {"type": "list_item", "content": "介词：时间、地点、方式"} ] }, { "type": "heading", "depth": 2, "content": "时态", "children": [ {"type": "list_item", "content": "一般现在时"}, {"type": "list_item", "content": "一般过去时"}, {"type": "list_item", "content": "一般将来时"}, {"type": "list_item", "content": "现在进行时"}, {"type": "list_item", "content": "过去进行时"}, {"type": "list_item", "content": "现在完成时"} ] }, { "type": "heading", "depth": 2, "content": "句子结构", "children": [ {"type": "list_item", "content": "陈述句"}, {"type": "list_item", "content": "疑问句"}, {"type": "list_item", "content": "祈使句"}, {"type": "list_item", "content": "感叹句"}, {"type": "list_item", "content": "复合句"} ] } ] }, { "type": "heading", "depth": 1, "content": "🗣️ 口语表达", "children": [ {"type": "list_item", "content": "日常对话场景"}, {"type": "list_item", "content": "问路指路"}, {"type": "list_item", "content": "购物砍价"}, {"type": "list_item", "content": "点餐用餐"}, {"type": "list_item", "content": "天气话题"} ] }, { "type": "heading", "depth": 1, "content": "📚 阅读理解", "children": [ {"type": "list_item", "content": "记叙文阅读技巧"}, {"type": "list_item", "content": "说明文阅读方法"}, {"type": "list_item", "content": "应用文阅读策略"}, {"type": "list_item", "content": "推理判断题"}, {"type": "list_item", "content": "主旨大意题"} ] }, { "type": "heading", "depth": 1, "content": "✍️ 写作技能", "children": [ {"type": "list_item", "content": "记叙文写作"}, {"type": "list_item", "content": "应用文写作"}, {"type": "list_item", "content": "看图作文"}, {"type": "list_item", "content": "书信格式"}, {"type": "list_item", "content": "作文模板"} ] }, { "type": "heading", "depth": 1, "content": "🎧 听力训练", "children": [ {"type": "list_item", "content": "数字听力"}, {"type": "list_item", "content": "场景对话"}, {"type": "list_item", "content": "短文理解"}, {"type": "list_item", "content": "信息提取"}, {"type": "list_item", "content": "听力技巧"} ] } ] }; // 初始化思维导图 let mm; function initMindmap() { const { Markmap } = window.markmap; const svg = document.querySelector('#mindmap'); mm = Markmap.create(svg, { duration: 500, initialExpandLevel: 2, color: (colorFn) => colorFn, maxWidth: 300, spacingHorizontal: 80, spacingVertical: 5, paddingX: 8 }, mindmapData); } // 下载图片功能 function downloadImage() { const svg = document.querySelector('#mindmap svg'); const svgData = new XMLSerializer().serializeToString(svg); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); const a = document.createElement('a'); a.download = '初中英语思维导图.png'; a.href = canvas.toDataURL('image/png'); a.click(); }; img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData))); } // 下载代码功能 function downloadCode() { const htmlContent = ` <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>初中英语思维导图</title> <script src="https://unpkg.com/d3@7"><\/script> <script src="https://unpkg.com/markmap-lib@0.15.4/dist/browser/index.js"><\/script> <script src="https://unpkg.com/markmap-view@0.15.4/d
phpcms新增分页样式
风信子的猫Redamancy: 内容详细，结构清晰，学到了，欢迎回访哦！

html

关注

关注数：文章数：4 文章阅读量：4357 文章收藏量：3

作者: 灯光设计师

这个作者很懒，什么都没留下…

展开

专栏收录文章