h5 新增特性 - Canvas绘图

Canvas绘图

          H5原生技术，基于网页画布2D位图绘图技术，善于表现细腻颜色，可用于统计图表、页面游戏、地图应用、网页特效等。

          使用Canvas的步骤：

           

         Canvas自身是一个300*150的inline-block元素；注意：Canvas画布尺寸不能使用CSS设置——会对整个图像进行扭曲！

         使用H5 Canvas API进行绘图：

             var ctx = c2.getContext('2d'); 

             //绘制矩形

             ctx.fillStyle = '#000'                  填充颜色/渐变色对象

             ctx.strokeStyle = '#000'           描边颜色/渐变色对象

             ctx.lineWidth = 1                      描边线宽度

             ctx.fillRect(x, y, w, h)：              填充矩形

             ctx.strokeRect(x, y, w, h)：       描边矩形

             ctx.clearRect(x, y, w, h)：          描边矩形

             //绘制文本

             ctx.font = '10px sans-serif'    

             ctx.textBaseline = 'alphabetic/top/bottom'

             ctx.fillStyle = '#000'                 

             ctx.strokeStyle = '#000'

             ctx.fillText(txt, x, y)                    填充文本

             ctx.strokeText(txt, x, y)             描边文本

             ctx.measureText(txt).width     测量文本基于当前字体设置的宽度

             //绘制路径——概念上类似于PS中的钢笔工具

             ctx.beginPath()

             ctx.moveTo()

             ctx.lineTo()

             ctx.arc()

             ctx.rect()

             ctx.ellipse()

             ctx.closePath()

              -----------------------------

             ctx.stroke()                                基于现有路径进行描边

             ctx.fill()                                       基于现有路径进行填充

             ctx.clip()                                     基于现有路径进行裁切

             //绘制图像

             ctx.drawImage(img, x, y)         绘制图像(原始尺寸)

             ctx.drawImage(img, x, y, w, h) 绘制图像(指定尺寸)

             //绘图上下文变形和状态保持

             ctx.rotate()                                 图像旋转

             ctx.translate()                            图像平移

             ctx.scale()                                   图像缩放

              ------------------

             ctx.save()                                    绘图上下文的保存

             ctx.restore()                               绘图上下文的恢复

       2.Chart.js —— 了解

          简单且灵活的JS图表绘制工具库，基于Canvas实现。类似于的工具还有ECharts、FreeChart、FusionCharts.....

          官网：http://www.chartjs.org/

          基本使用方法：