太原最近的流行病毒_台州手机网站制作_推广优化师_广告软文怎么写

一、Canvas绘图基础架构

1.1 画布初始化

<!-- 声明512x512画布区域 -->
<canvas id="drawBoard" width="512" height="512"></canvas><script>
// 获取2D渲染上下文
const canvas = document.getElementById('drawBoard');
const ctx = canvas.getContext('2d');
</script>

1.2 坐标系系统实战验证

// 绘制坐标系验证线
ctx.beginPath();// X轴（红色）
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, 0);
ctx.strokeStyle = '#FF0000';
ctx.stroke();// Y轴（蓝色） 
ctx.moveTo(0, 0);
ctx.lineTo(0, canvas.height);
ctx.strokeStyle = '#0000FF';
ctx.stroke();// 网格线（灰色）
ctx.setLineDash([5, 5]);
ctx.strokeStyle = '#EEE';
for(let i=50; i<canvas.width; i+=50){ctx.moveTo(i, 0);ctx.lineTo(i, canvas.height);
}
for(let j=50; j<canvas.height; j+=50){ctx.moveTo(0, j);ctx.lineTo(canvas.width, j);
}
ctx.stroke();

---

二、基础图形绘制技法

2.1 矩形绘制三式

// 实心矩形（位置50,50 尺寸100x80）
ctx.fillStyle = '#FF6B6B';
ctx.fillRect(50, 50, 100, 80);// 线框矩形（线宽4px）
ctx.lineWidth = 4;
ctx.strokeStyle = '#4ECDC4';
ctx.strokeRect(200, 50, 120, 100);// 立即绘制（组合操作）
ctx.beginPath();
ctx.rect(350, 50, 80, 80);
ctx.fill();
ctx.stroke();

2.2 圆形与弧形绘制

ctx.beginPath();
// 圆心(150,300) 半径60
// 起始角0 结束角π 逆时针
ctx.arc(150, 300, 60, 0, Math.PI, true);
ctx.lineWidth = 3;
ctx.stroke();// 绘制3/4圆（270度）
ctx.beginPath();
ctx.arc(320, 300, 60, 0, Math.PI * 1.5);
ctx.fillStyle = '#45B7D1';
ctx.fill();

---

三、高级路径控制

3.1 贝塞尔曲线实战

// 二次贝塞尔（控制点坐标）
ctx.beginPath();
ctx.moveTo(50, 400);
ctx.quadraticCurveTo(150, 300, 250, 400);
ctx.strokeStyle = '#FF9F1C';
ctx.stroke();// 三次贝塞尔（双控制点）
ctx.beginPath();
ctx.moveTo(300, 400);
ctx.bezierCurveTo(350, 350, 450, 450, 500, 400);
ctx.strokeStyle = '#2EC4B6';
ctx.stroke();

3.2 多边形组合绘制

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(150, 150);
ctx.lineTo(100, 200);
ctx.closePath(); // 自动闭合路径
ctx.fillStyle = 'rgba(255, 99, 71, 0.7)';
ctx.fill();

---

四、文本与图像处理

4.1 多模式文字渲染

// 描边文字
ctx.font = 'bold 32px "Segoe UI"';
ctx.strokeStyle = '#2A2A2A';
ctx.strokeText('Hello Canvas', 50, 500);// 渐变填充文字
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, '#FF6B6B');
gradient.addColorStop(1, '#4ECDC4');
ctx.fillStyle = gradient;
ctx.fillText('Creative Coding', 50, 550);

4.2 图像合成处理

const img = new Image();
img.src = 'texture.png';
img.onload = () => {// 平铺背景const pattern = ctx.createPattern(img, 'repeat');ctx.fillStyle = pattern;ctx.fillRect(0, 0, 512, 512);// 图像裁剪ctx.beginPath();ctx.arc(256, 256, 100, 0, Math.PI*2);ctx.clip();ctx.drawImage(img, 150, 150, 200, 200);
};

---

五、动态交互实现

5.1 帧动画基础

let rotation = 0;
function animate() {ctx.clearRect(0, 0, 512, 512);ctx.save();ctx.translate(256, 256);ctx.rotate(rotation);ctx.fillStyle = '#FF6B6B';ctx.fillRect(-50, -50, 100, 100);ctx.restore();rotation += 0.02;requestAnimationFrame(animate);
}
animate();

5.2 点击交互示例

canvas.addEventListener('click', (e) => {const rect = canvas.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;ctx.beginPath();ctx.arc(x, y, 20, 0, Math.PI*2);ctx.fillStyle = '#2EC4B6';ctx.fill();
});

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕