29:null 2a:["$","title",null,{"children":"CSS 集合 | 廖晓娟 | Observable"}] 2f:T4dc,drawPie = { return (canvas, data, center) => { // 2、绘制一个饼图 const sum = data.reduce((a, b) => a + b.value, 0); const radius = canvas.height / 4; // 2.1 从正12点开始绘制 let startAngle = -Math.PI / 2; const ctx = canvas.getContext("2d"); // 🐷🐷 注意要先填充，再描边 data.forEach((d, idx) => { // 🐷 每次都要重新一条新的路径（path 绘制） ctx.beginPath(); const angle = Math.PI * 2 * (d.value / sum); const endAngle = startAngle + angle; ctx.arc(center.x, center.y, radius - 1, startAngle, endAngle); startAngle = endAngle; ctx.lineTo(center.x, center.y); // 设置透明度 ctx.globalAlpha = 0.85; ctx.fillStyle = COLORS[idx]; ctx.fill(); }); data.forEach((d, idx) => { // 每次都要重新一条新的路径（path 绘制） ctx.beginPath(); const angle = Math.PI * 2 * (d.value / sum); const endAngle = startAngle + angle; ctx.arc(center.x, center.y, radius - 1, startAngle, endAngle); startAngle = endAngle; ctx.lineTo(center.x, center.y); ctx.globalAlpha = 1; ctx.strokeStyle = "#131313"; ctx.stroke(); }); }; }30:[] 2d:{"id":"e489f2239f906060","slug":"css","title":"CSS 集合","thumbnail":"717eaefccea51bcb6941f91c51a42bd007338df011d3f01d94ca6994e630c030","access_level":"public","create_time":"$D2022-02-07T11:54:28.006Z","update_time":"$D2022-04-01T13:07:14.516Z","view_time":null,"first_public_time":"$D2022-02-07T12:04:38.507Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"43eb0216033f303e","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":"starter_2024"},"version":317,"publish_version":317,"role":null,"authored":false,"authors":[{"type":"individual","id":"6c057a398a73f6b0","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":null}],"members":[{"type":"individual","id":"6c057a398a73f6b0","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CSS 集合","cells":[{"id":0,"value":"# CSS 集合","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3,"value":"viewof color = Inputs.color({label: \"Favorite color\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"## 如何实现多重径向/角度渐变","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":45,"value":"### 面试题：如何实现左边 5px 红色，剩下的为灰色","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":53,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":100,"value":"## 可视化相关","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":104,"value":"### 用 canvas 绘制一个扇形","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":108,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":111,"value":"draw = {\n setTimeout(() => {\n let container = document.querySelector(\".canvas-container1\");\n if (!container) {\n return;\n }\n const { width, height } = container.getBoundingClientRect();\n let canvas = container.querySelector(\"canvas\");\n if (canvas) {\n container.removeChild(canvas);\n }\n canvas = document.createElement(\"canvas\");\n const dpr = window.devicePixelRatio || 2;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n container.appendChild(canvas);\n\n drawArc(canvas);\n const data1 = [\n { type: \"分类1\", value: 20 },\n { type: \"分类2\", value: 10 },\n { type: \"分类3\", value: 10 }\n ];\n const data2 = [\n { type: \"分类1\", value: 27 },\n { type: \"分类2\", value: 10 }\n ];\n drawPie(canvas, data1, { x: canvas.width / 2, y: canvas.height / 2 });\n drawPie(canvas, data2, { x: (canvas.width / 4) * 3, y: canvas.height / 2 });\n }, 500);\n\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"drawArc = {\n return (canvas) => {\n const ctx = canvas.getContext(\"2d\");\n // 1、练习：绘制一个弧形\n ctx.strokeStyle = \"red\";\n let center = [canvas.width / 6, canvas.height / 4];\n ctx.moveTo(...center);\n // 30度\n ctx.arc(...center, canvas.height / 2, 0, Math.PI / 6);\n ctx.lineTo(...center);\n ctx.stroke();\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":241,"value":"COLORS = [\n \"#5B8FF9\",\n \"#5AD8A6\",\n \"#5D7092\",\n \"#F6BD16\",\n \"#6F5EF9\",\n \"#6DC8EC\",\n \"#945FB9\",\n \"#FF9845\",\n \"#1E9493\",\n \"#FF99C3\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"