02 | 指令式绘图系统：如何用Canvas绘制层次关系图？

老师，有点不太理解translate的平移操作，平移后画布的坐标系是怎么发生变化的呢? 平移的是画布还是坐标系。

原理大致听懂了,学着做个打砖块练习 https://codepen.io/ysosu/pen/MWKorYj 问题: function draw(ctx, node, {fillStyle = 'rgba(0, 0, 0, 0.2)', textColor = 'white'} = {}) {}; 里面这个{fillStyle = 'rgba(0, 0, 0, 0.2)', textColor = 'white'} = {}没看懂 跟这样写的差别是啥function draw(ctx, node, fillStyle = 'rgba(0, 0, 0, 0.2)', textColor = 'white' ) {};

借鉴了之前留言的朋友的部分逻辑重新开发了一个五子棋程序，主要修改了几个地方： - 使用二维数组记录落子情况，方便后续判断胜负 - 重新获取光标后不进行整个棋盘的渲染，而是将上一个光标处局部修复 - 根据当前落子周围八个方向4个单位距离的棋盘中是否赢了 遇到的问题： - 光标是用1个单位线宽绘制出来的，我用同样一个单位线宽去覆盖，发现覆盖不全，还会残留线段，最后只能加大线宽去覆盖，请问老师这个是什么问题？ 五子棋在线预览：https://codesandbox.io/s/chess-demo-d2qgt

老师现在讲的还可以完全听懂，学习了之后立刻实践了以下。并且，学练结合，把以前的想法实现了下。这次没有偷懒。画了个五子棋盘+棋子，输赢判定逻辑还没写。 https://codepen.io/maslke/pen/MWKoKKp

我尝试了用canvas绘制不规则多边形，如果想要添加鼠标交互事件，获取到鼠标的坐标之后，可以利用凸包算法判断点是否在不规则多边形内。

老师，获取json的都挂了

作业2: 1. 先封装一个清除圆形方法： CanvasRenderingContext2D.prototype.clearCircle = function (x, y,r) { context.save(); context.fillStyle = "rgba(255,255,255,255)"; context.beginPath(); context.arc(x, y, r, 0, TAU); context.fill(); context.restore(); }; 2. 检测鼠标是否在圆内(在圆内就先清除圆再绘制名称和新颜色): // 鼠标检测移动到小圆就变色 function isInCircle(ctx, mx, my, node) { const children = node.children; if (children) { for (let i = 0; i < children.length; i++) { isInCircle(ctx, mx, my, children[i]); } } else { const { x, y, r } = node; if ((my - y) * (my - y) + (mx - x) * (mx - x) < r * r) { console.log(x, y); ctx.clearCircle(x, y, r); ctx.fillStyle = "rgba(255,0,0,0.2)"; ctx.beginPath(); ctx.arc(x, y, r, 0, TAU); ctx.fill(); const name = node.data.name; ctx.fillStyle = "white"; ctx.font = "1.5rem Arial"; ctx.textAlign = "center"; ctx.fillText(name, x, y); } } } 3. 监听鼠标mousemove事件(变换页面鼠标位置与canvas内坐标的关系)： canvas.addEventListener("mousemove", (e) => { const x = e.clientX * 2; const y = e.clientY * 2; isInCircle(context, x, y, root); });

提交一下第二个作业。之前纠结了一下怎么在鼠标移出城市时恢复小圆的颜色，最后决定专门做一个新的 canvas 叠在上面。另外鼠标移动的事件是不是要做个节流比较好？我试了一下感觉又不够流畅，就去掉了…… https://codepen.io/gltjk/pen/GRomzQE

老师，JSON数据不能用了可以解决一下不，或者把数据结构要求贴一下我们模拟一下

交作业：https://output.jsbin.com/rirahom，思路基本和大家一致。 看完评论有两个主要的优化方法： 1. 减少重绘次数：判断是否在「圆」内 或 判断结果和上次不同，才进行重绘 2. 缩小重绘区域：进行局部清除和局部重绘