教你用H5绘图的基础方法

前言

在HTML5中，我们可以使用Canvas元素来绘制图形。Canvas提供了一组绘图API，可以通过JavaScript代码来操纵它，实现各种绘图功能。本文将介绍基础的HTML5绘图方法，帮助你快速入门。

绘制矩形

Canvas中的drawRect()方法可以绘制矩形。下面是一个简单的例子，展示了如何在Canvas上绘制一个红色矩形：

// 获取Canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

在上面的代码中，我们首先获取到了ID为myCanvas的Canvas元素，并通过getContext()方法获取到了一个2D绘图上下文。接着，我们设置fillStyle属性为红色，并调用fillRect()方法绘制一个大小为100x100的矩形。

绘制圆形

Canvas中的arc()方法可以绘制圆形。下面是一个例子，展示了如何在画布上绘制一个半径为50px的蓝色圆形：

// 获取Canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制圆形
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

在上面的代码中，我们依然是首先获取到了Canvas元素，并获取到了2D绘图上下文。然后，我们设置fillStyle属性为蓝色，并调用beginPath()方法开始绘制路径，接着调用arc()方法绘制一个半径为50px的圆形，最后调用fill()方法填充颜色。

总结

通过Canvas元素和绘图API，我们可以在HTML5中实现各种图形的绘制。本文介绍了绘制矩形和圆形的基础方法，希望能够帮助你快速入门绘图技术。