使用canvas画线line、矩形arc、文字、旋转等实例

canvas是html5里面新增的标签，是html5中的画布，用来绘制图形，现在有很多的图表插件底层已经改为由canvas实现，如百度的产品echarts3.0的底层就是基于canvas的，使用canvas可以绘制我们常见到的折线图、柱状图、饼图、k线图等各种图形，为数据可视化提供了新的解决思路，也是html5中最重要的功能。这篇文章我找到了以前学习时候写的几个实例，分别涉及到了lineTo、moveTo、arc、stroke、beginPath、closePath()、rect()、strokeText()等函数，实例效果如下：

实现的代码如下。html：

javascript代码：

css代码：

总结与说明：

        1.上边实现应该注意的点我已经写在了代码的注释里，不清楚的可以看代码的注释

        2.另外一点需要注意的是，canvas的宽高不能再css里面设置，需要使用canvas自己的width和height属性来设置，如，不然会引起canvas绘制出来的图像变形。