canvas快速绘制圆形、三角形、矩形、多边形方法介绍

//获取canvas容器
var can = document.getElementById('canvas');
//创建一个画布
var ctx = can.getContext('2d');

var draw = function(x, y, r, start, end, color, type) {
 var unit = Math.PI / 180;
 ctx.beginPath();
 ctx.arc(x, y, r, start * unit, end * unit);
 ctx[type + 'Style'] = color;
 ctx.closePath();
 ctx[type]();
}

var draw = function(x1, y1, x2, y2, x3, y3, color, type) {
 ctx.beginPath();
 ctx.moveTo(x1, y1);
 ctx.lineTo(x2, y2);
 ctx.lineTo(x3, y3);
 ctx[type + 'Style'] = color;
 ctx.closePath();
 ctx[type]();
}

var draw = function(x, y, width, height, radius, color, type){
 ctx.beginPath();
 ctx.moveTo(x, y+radius);
 ctx.lineTo(x, y+height-radius);
 ctx.quadraticCurveTo(x, y+height, x+radius, y+height);
 ctx.lineTo(x+width-radius, y+height);
 ctx.quadraticCurveTo(x+width, y+height, x+width, y+height-radius);
 ctx.lineTo(x+width, y+radius);
 ctx.quadraticCurveTo(x+width, y, x+width-radius, y);
 ctx.lineTo(x+radius, y);
 ctx.quadraticCurveTo(x, y, x, y+radius);
 ctx[type + 'Style'] = color || params.color;
 ctx.closePath();
 ctx[type]();
}

var drawPolygon = function(ctx, conf){
 var x = conf && conf.x || 0; //中心点x坐标
 var y = conf && conf.y || 0; //中心点y坐标
 var num = conf && conf.num || 3; //图形边的个数
 var r = conf && conf.r || 100; //图形的半径
 var width = conf && conf.width || 5;
 var strokeStyle = conf && conf.strokeStyle;
 var fillStyle = conf && conf.fillStyle;
 //开始路径
 ctx.beginPath();
 var startX = x + r * Math.cos(2*Math.PI*0/num);
 var startY = y + r * Math.sin(2*Math.PI*0/num);
 ctx.moveTo(startX, startY);
 for(var i = 1; i <= num; i++) {
 var newX = x + r * Math.cos(2*Math.PI*i/num);
 var newY = y + r * Math.sin(2*Math.PI*i/num);
 ctx.lineTo(newX, newY);
 }
 ctx.closePath();
 //路径闭合
 if(strokeStyle) {
 ctx.strokeStyle = strokeStyle;
 ctx.lineWidth = width;
 ctx.lineJoin = 'round';
 ctx.stroke();
 }
 if(fillStyle) {
 ctx.fillStyle = fillStyle;
 ctx.fill();
 }
}

drawPolygon(ctx, {
 num: 6,
 r: 100,
 strokeStyle: 'blue',
 fillStyle: '#9da'
})

drawPolygon(ctx, {
 num: 4,
 r: 150,
 strokeStyle: 'red',
 width: 4
})

drawPolygon(ctx, {
 x: 800,
 y: 250,
 num: 10,
 fillStyle: '#000'
})