H5 canvas基础入门到捕鱼达人小游戏实现(2)

学习canvas是一个不长不短的过程，但是需要大量的实践，才能深入学习到canvas的精髓，所以看标题应该就知道canvas是一个系列文章，上一篇文章主要讲解了，canvas的如何画直线等一些基础的内容，那么这边文章，我们主要来学习下以下几点：

基础：
- 矩形
- 圆弧
- 柱状图
- 饼图

画矩形

var canvas= document.getElementById('canvas');var context= canvas.getContext('2d');context.beginPath();context.strokeStyle='red';context.fillStyle = 'blue';context.lineWidth = 10;context.strokeRect(100,100,300,300);context.fillRect(200,200,300,200);

看看画出的效果：

canvas api

context.strokeRect(x,y,w,h);context.fillRect(x,y,w,h);x：画布xy：画布yw：矩形宽h：矩形高

其实会绘制矩形的话，那么绘制柱状图也就是水到渠成的事情了，我们先把画弧的基础api讲解完，在一并来绘制动态的柱状图和饼图

先来看看api

弧形api

context.arc(x,y,radius,starAngle,endAngle,anticlockwise);x:圆心的x坐标y:圆心的y坐标radius:半径straAngle:开始角度(弧度计算)endAngle:结束角度(弧度计算)anticlockwise:(true)为逆时针，(false)为顺时针

看一个图片帮助理解

画一个简单的弧形

var canvas= document.getElementById('canvas');var context= canvas.getContext('2d');context.arc(300,200,100,0,90*(Math.PI/180)，true);//Math.PI/180*deg 是角度转弧度的公式context.stroke();

画出的样子

好了，矩形和圆弧的基础api已经讲完了，那么现在我们先来看看饼状图是如何实现的。

var oC = document.getElementById('c1');    var gd = oC.getContext('2d');    var cx = oC.width/2;//设置饼图的x坐标为画布的宽度一半的位置    var cy = oC.height/2;//设置饼图的y坐标为画布的宽度一半的位置    var r = 100;//半径为100    var arr = [50,32,66,87,91,26,100,40,50];//饼图的每个块的数据    var color = ["#eee","red","blue","#egegeg","#eee","red","blue","#egegeg","black"];//每个块的颜色    var iSum = 0;//声明变量，会的是计算出所有值的总和    for(var i=0;i<arr.length;i++){        iSum+=arr[i];    }    var aD = [];    for(var i=0;i<arr.length;i++){        //计算出每个值占总值的比例*360deg = 饼图比例        aD.push(arr[i]/iSum*360);    }    var d = 0;    function drawCake(){        //画图之前，先清除下画布        gd.clearRect(0,0,oC.width,oC.height);        for(var i=0;i<aD.length;i++){            gd.beginPath();//开始绘图            gd.moveTo(cx,cy);//起始点            gd.arc(cx,cy,r,d2a(d-90),d2a(aD[i]+d-90),false);//画圆弧            gd.closePath();//结束路径            gd.fillStyle = color[i];//设置每个块的颜色            gd.fill();//填充绘制            gd.stroke();//描边绘制            d = d + aD[i];//关键点：初始角度每次循环都增加至上次的结束角度        }    }    drawCake();

先看看图片效果：

一个简单的饼图就绘制出来了，如果有什么不懂的可以看看代码注释。

再来看看柱状图的代码：

var oC = document.getElementById('c1');    var gd = oC.getContext('2d');    var arr = [40,70,10,80,23,60];//柱状图数据(每根柱子的数据)    var iMax = Math.max.apply(null,arr);//找出最大值    var aHeight = [];    for(var i=0;i<arr.length;i++){        //计算出每根柱子的高度比例 ( 柱子高/最大柱子高 )*画布的高度            aHeight.push(arr[i]/iMax*oC.height);    }    //柱子宽度=画布的宽度/柱子的数量*3-2 (这只是计算的公式，也可以根据实际需求自行设计)    var w = oC.width/(arr.length*3-2);    var space = 2*w;//柱子之间的间距    var member = 1;//运动的初始值    var number = 100;//运动的峰值    function drawBarAnimate(){        //动态不断调用，需要先清空画布再渲染画布，达到动态效果        gd.clearRect(0,0,oC.width, oC.height);        for(var i=0;i<aHeight.length;i++){            //柱子的高度*（运动比例）            var h = aHeight[i]*(member/number);            var y = oC.height - h;//y轴的位置(画布高度-柱子的高度)            var x = i*w+i*space; //x轴的位置            gd.beginPath();            gd.fillStyle = "blue";            gd.fillRect( x, y, w, h );        }        member++;        if(member<number){            requestAnimationFrame(drawBarAnimate);//这个如果不太清楚可以自行百度下        }else{            //运动结束回调            console.log("运动结束");        }    }    drawBarAnimate();

看下图片效果

图片颜色什么的都特别丑，这里只是实现了柱形图一部分的核心功能，当然也可以自行修改下。

好了本节内容基础结束了，总结下。
我们学习，如何绘制矩形，圆弧，已经两个简单的应用：饼图和柱状图。通过练习，相信已经对canvas能有一个基础的了解了，但是这离我们写扑鱼效果还有一段距离。不要紧慢慢来，下节继续。