在h5开发中，canvas是一个常用的绘图工具。然而，很多开发者在使用canvas时会遇到一个常见的问题，那就是如何将canvas元素居中显示。本文将详细介绍使用百分比来实现h5的canvas居中设置的方法。
一、设置canvas的样式
首先，我们需要为canvas元素设置相应的样式。在html中，可以通过添加一个css类来实现：
```html
```
上述代码中，我们为canvas元素的外层容器添加了`.canvas-container`类，并设置了宽度为100%，高度为0，并使用`padding-bottom`属性来计算出canvas元素的高度，这里的百分比可以根据实际需求进行调整。
同时，我们为canvas元素添加了`.canvas`类，并通过设置`top:50%`和`left:50%`将其居中显示，然后通过`transform:translate(-50%,-50%)`来微调位置，使之完美居中。
二、使用canvas绘图
接下来，我们可以开始使用canvas来绘制图形了。这里以绘制一个简单的矩形为例：
```html
```
上述代码中，我们在html中创建了一个canvas元素，并将其放置在`.canvas-container`容器中。
在javascript中，我们首先获取到canvas元素，并获取到绘图上下文对象。然后，设置canvas的宽度和高度为容器的宽度和高度。
最后，通过绘图上下文对象的`fillrect`方法绘制了一个红色的矩形，其位置和尺寸与canvas元素相同。
三、效果演示
下面是一个完整的示例代码，你可以复制到html文件中运行查看效果：
```html
```
通过以上步骤，我们成功地将h5的canvas元素居中显示了。这种方法适用于大多数场景，无论是在移动端还是在pc端都可以正常工作。
总结:
本文详细介绍了如何使用百分比将h5的canvas元素居中显示。通过设置canvas元素的样式和使用相应的css属性，我们可以很方便地实现居中效果。同时，我们也给出了一个简单的示例代码，希望对你有所帮助。如果你在h5开发中遇到了类似的问题，不妨尝试一下这种方法。
