Canvas基础图形绘制：圆形、三角形与矩形的实现

"这篇教程主要介绍了如何使用HTML5的canvas元素快速绘制圆形、三角形、矩形和多边形。作者提供了详细的代码示例和解释，帮助读者掌握基本图形的绘制方法。此外，作者还分享了一个封装好的快速绘制多边形的函数。" 在HTML5的canvas API中，我们可以利用其提供的绘图方法来创建各种图形。首先，我们需要获取canvas元素并创建2D渲染上下文。如下所示： ```javascript var can = document.getElementById('canvas'); var ctx = can.getContext('2d'); ``` 接下来，我们来看如何绘制不同的图形。 1. 绘制圆形： 使用`arc()`方法可以绘制圆形。该方法接受圆心坐标(x, y)、半径(r)、起始角度(start)、结束角度(end)以及一个可选的逆时针方向标志。然后通过`fillStyle`或`strokeStyle`设置颜色，最后调用`fill()`或`stroke()`进行填充或描边。 ```javascript var drawCircle = function(x, y, r, start, end, color, type) { var unit = Math.PI / 180; ctx.beginPath(); ctx.arc(x, y, r, start * unit, end * unit); ctx[type + 'Style'] = color; ctx.closePath(); ctx[type](); } ``` 2. 绘制三角形： 三角形由三条直线段构成，使用`moveTo()`定义起始点，然后用`lineTo()`连接其他点。最后同样设置颜色和类型后调用`fill()`或`stroke()`。 ```javascript var drawTriangle = function(x1, y1, x2, y2, x3, y3, color, type) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx[type + 'Style'] = color; ctx.closePath(); ctx[type](); } ``` 3. 绘制矩形（包括圆角矩形）： `rect()`方法用于绘制矩形，但要绘制圆角矩形，通常需要使用`arcTo()`创建圆角。这里我们只展示基本矩形的绘制。 ```javascript var drawRectangle = function(x, y, width, height, radius, color, type) { ctx.beginPath(); ctx.fillStyle = color; ctx.fillRect(x, y, width, height); } ``` 对于多边形的绘制，作者提供了一个封装好的函数，它能够根据给定的顶点数组和颜色进行绘制。这个函数的实现会更复杂，因为它需要处理多边形的顶点连接。 在实际应用中，这些基本图形是构建更复杂图形的基础。通过组合和变换，可以创造出各种各样的视觉效果。通过不断地练习和探索，开发者可以掌握更多高级的canvas绘图技巧，如渐变、阴影、图案填充等，从而实现更具吸引力的网页交互体验。