JavaScript 第十五章第十六章第十七章第十八章 案例教程 + 全课程回顾说明：本教程为JavaScript系列的完结篇。第十五章：Canvas绘图与动画；第十六章：WebSocket实时通信；第十七章：Web Workers多线程；第十八章：安全防护与性能守则。最后对全部十八章节进行系统回顾，构筑完整的前端知识体系。第一部分：第十五章 Canvas绘图与动画一、背景故事：小周需要绘制实时数据图表公司要求仪表板增加CPU使用率的实时折线图和圆环进度指示器。小周决定使用元素绘制自定义图形，避免依赖第三方图表库。二、Canvas基础是HTML5引入的绘图容器，通过JavaScript动态绘制2D图形。canvasid="myCanvas"width="800"height="400"style="border:1px solid #ccc"/canvas获取上下文并绘制：constcanvas=document.getElementById('myCanvas');constctx=canvas.getContext('2d');// 获取2D渲染上下文2.1 基本绘图方法方法 作用fillRect(x, y, w, h) 填充矩形strokeRect(x, y, w, h) 描边矩形clearRect(x, y, w, h) 清除矩形区域beginPath() 开始新路径moveTo(x, y) 移动笔触lineTo(x, y) 画线stroke() / fill() 描边/填充路径arc(x, y, r, startAngle, endAngle, anticlockwise) 圆弧fillText(text, x, y) 填充文字// 绘制一个红色矩形ctx.fillStyle='red';ctx.fillRect(50,50,150,100);// 绘制一个蓝色圆ctx.beginPath();ctx.arc(300,200,50,0,Math.PI*2);ctx.fillStyle='blue';ctx.fill();// 绘制带边框的三角形ctx.beginPath();ctx.moveTo(500,300);ctx.lineTo(600,200);ctx.lineTo(700,300);ctx.closePath();ctx.strokeStyle='green';ctx.lineWidth=3;ctx.stroke();2.2 图像与渐变// 线性渐变constgradient=ctx.createLinearGradient(0,0,200,0);gradient.addColorStop(0,'red');gradient.addColorStop(1,'yellow');ctx.fillStyle=gradient;ctx.fillRect(10,10,200,100);// 绘制图片constimg=newImage();img.src='logo.png';img.onload=()={ctx.drawImage(img,100,100,80,80);};三、动画循环使用 requestAnimationFrame 实现流畅动画，它会在浏览器刷新前执行，支持节流。letx=0;functiondraw(){// 清空画布ctx.clearRect(0,0,canvas.width,canvas.height);// 绘制移动的小球ctx.beginPath();ctx.arc(x,200,20,0,