学了canvas随便写点东西（插件的logo)

效果大概是这样婶的。。

参照的是这个

贴几个我觉得比较有意思的片段吧
1.绘制圆角矩形，众所周知canvas并没有提供圆角矩形这种api,所以得自己写个函数（有参考）

  	//判断圆的直径有没有大于宽高        
  	if (2 * radius > width || 2 * radius > height) {
  		return false;
  	}

  	cxt.save();
	//直接移到图形左上角开始画
  	cxt.translate(x, y);
  	//绘制圆角矩形的各个边  
  	drawRoundRectPath(cxt, width, height, radius);
  	cxt.fill();
  	cxt.restore();
  }

  function drawRoundRectPath(cxt, width, height, radius) {
  	cxt.beginPath(0);
	//左上角圆弧，弧度从PI到3/2PI
	cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);	
	//上边线  
	cxt.lineTo(width - radius, 0);
	//右上角圆弧  
	cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
	
  	//右下角，弧度从0到1/2PI  
  	cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

  	//矩形下边线  
  	cxt.lineTo(radius, height);

  	//左下角圆弧，弧度从1/2PI到PI  
  	cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

  	//矩形左边线  
  	cxt.lineTo(0, radius);
  	//右边线  
  	cxt.lineTo(width, height - radius);
  	cxt.closePath();
  }
复制代码

2.插件的logo大概可以看出来不是完全的半圆凹陷，还会有一段类似矩形的图案拼接，这里我用了两种方法，一种是圆形+矩形，一种是两个圆形

        //圆形+圆形
        context.beginPath();
        context.arc(100, 45, 10, 0, Math.PI * 2, true)
        context.closePath();
        context.fillStyle = "#00a8ff"
        context.fill()
        context.beginPath();
        context.arc(100, 50, 10, 0, Math.PI * 2, true)
        context.closePath();
        context.fillStyle = "#00a8ff"
        context.fill()
复制代码

    //矩形+圆形
    context.fillStyle = "white"
    context.fillRect(45, 90, 10, 20)

    context.beginPath();
    context.arc(55, 100, 10, Math.PI * 90 / 180, Math.PI * 270 / 180, true)
    context.closePath();
    context.fillStyle = "white"
    context.fill()
复制代码

3.加了个不怎么明显的渐变

        var g1 = context.createLinearGradient(0, 0, 0, 100);
        g1.addColorStop(0, '#54a0ff');
        g1.addColorStop(1, '#00a8ff');
        context.fillStyle = g1
复制代码