canvas快速繪制圓形、三角形、矩形、多邊形方法介紹

更新時(shí)間：2016年12月29日 10:25:33 作者：luckykun

本文主要介紹了使用canvas來(lái)繪制常見的各種圖形實(shí)例，并且會(huì)簡(jiǎn)單封裝一下繪制各圖形的方法，最后會(huì)分享給大家一個(gè)封裝好的快速繪制多邊形的方法。下面跟著小編一起來(lái)看下吧

想看前面整理的canvas常用API的同學(xué)可以點(diǎn)下面：

canvas學(xué)習(xí)之API整理筆記（一）

canvas學(xué)習(xí)之API整理筆記（二）

本系列文章涉及的所有代碼都將上傳至：http://wd.jb51.net:81//201612/yuanma/About-Canvas-master_jb51.rar

從本篇文章開始，我會(huì)分享給大家canvas繪制的各種基礎(chǔ)圖形和酷炫的圖形，注意：是一系列！歡迎關(guān)注！

后續(xù)每篇文章我會(huì)著重分享給大家一些使用Canvas開發(fā)的實(shí)例和這些實(shí)例的實(shí)現(xiàn)思路。

本文看點(diǎn)：使用canvas來(lái)繪制常見的各種圖形實(shí)例，并且會(huì)簡(jiǎn)單封裝一下繪制各圖形的方法，最后會(huì)分享給大家一個(gè)封裝好的快速繪制多邊形的方法。

開始之前

//獲取canvas容器
var can = document.getElementById('canvas');
//創(chuàng)建一個(gè)畫布
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]();
}

參數(shù)解釋：x,y-圓心；start-起始角度；end-結(jié)束角度；color-繪制顏色；type-繪制類型（'fill'和'stroke'）。

實(shí)例如下圖所示：

繪制三角形

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]();
}

參數(shù)解釋：x1(2、3),y1(2、3)-三角形的三個(gè)點(diǎn)的坐標(biāo)；color-繪制顏色；type-繪制類型（'fill'和'stroke'）。

實(shí)例如下圖所示：

繪制（圓角）矩形

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]();
}

參數(shù)解釋：x,y-左上角點(diǎn)的坐標(biāo)；width、height-寬高；radius-圓角；color-繪制顏色；type-繪制類型（'fill'和'stroke'）。

實(shí)例如下圖所示：

繪制多邊形

var drawPolygon = function(ctx, conf){
 var x = conf && conf.x || 0; //中心點(diǎn)x坐標(biāo)
 var y = conf && conf.y || 0; //中心點(diǎn)y坐標(biāo)
 var num = conf && conf.num || 3; //圖形邊的個(gè)數(shù)
 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();
 }
}

參數(shù)說(shuō)明：

ctx: canvas畫布

conf: 配置項(xiàng)，提供以下一些配置

x：中心點(diǎn)橫坐標(biāo)
y：中心點(diǎn)縱坐標(biāo)
num: 多邊形的邊數(shù)
r：多邊形的半徑長(zhǎng)度
width：多邊形線的寬度
strokeStyle：邊線的顏色
fillStyle：填充的顏色

上圖效果的代碼如下：

上圖1的代碼：

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

上圖2的代碼：

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

上圖3的代碼：

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

結(jié)語(yǔ)

我們總結(jié)一下，使用canvas繪制圖形就是那幾個(gè)函數(shù)：beginPath、arc、moveTo、lineTo、closePath、fill、stroke。當(dāng)我們能夠熟練掌握并運(yùn)用自如的時(shí)候，就能夠獨(dú)當(dāng)一面了。加油吧，騷年們！

本文涉及的代碼我已經(jīng)上傳至github，項(xiàng)目代碼github地址，喜歡的同學(xué)點(diǎn)個(gè)Star，多謝多謝～

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: