本文共 1392 字，大约阅读时间需要 4 分钟。
1. 绘制线条
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(400, 200);ctx.strokeStyle = 'red';ctx.stroke();这段代码会在Canvas上绘制一条从左上角(0, 0)到右下角(400, 200)的红色直线。
2. 绘制具有不同结束线帽的线条
ctx.lineWidth = 10;
ctx.lineCap = "butt"; // 平直的线帽
ctx.moveTo(20, 20);ctx.lineTo(380, 20);ctx.strokeStyle = "red";ctx.stroke();ctx.lineCap = "round"; // 圆形的线帽ctx.moveTo(20, 40);ctx.lineTo(380, 40);ctx.strokeStyle = "green";ctx.stroke();ctx.lineCap = "square"; // 方形的线帽ctx.moveTo(20, 60);ctx.lineTo(380, 60);ctx.strokeStyle = "blue";ctx.stroke();这段代码绘制了三条具有不同线帽样式的线条，展示了如何在Canvas上控制线条的细节。
3. 绘制向阳花图形
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "#eeeeef";ctx.fillRect(0, 0, 300, 300);var dx = 150;var dy = 150;var s = 100;ctx.beginPath();ctx.fillStyle = "rgb(255, 255, 0)";ctx.strokeStyle = "rgb(0, 0, 100)";var dig = Math.PI / 15 * 11;for (var i = 0; i < 30; i++) {var x = Math.sin(dig * i);var y = Math.cos(dig * i);ctx.lineTo(dx + x * s, dy + y * s);}ctx.closePath();ctx.fill();ctx.stroke();这段代码首先绘制了一个淡灰色的背景，然后在中心绘制了一个向阳花图形。
总结与展望
通过以上示例，我们可以看到Canvas API的强大和灵活。无论是简单的线条还是复杂的图形，Canvas都能轻松应对。希望今天的分享能够帮助大家更好地理解和使用Canvas。
转载地址：http://wyrfk.baihongyu.com/