canvas快速繪制圓形、三角形、矩形、多邊形方法介紹
想看前面整理的canvas常用API的同學可以點下面：
本系列文章涉及的所有代碼都將上傳至：http://wd.jb51.net:81//201612/yuanma/About-Canvas-master_jb51.rar
從本篇文章開始，我會分享給大家canvas繪制的各種基礎圖形和酷炫的圖形，注意：是一系列！歡迎關注！
后續(xù)每篇文章我會著重分享給大家一些使用Canvas開發(fā)的實例和這些實例的實現(xiàn)思路。
本文看點：使用canvas來繪制常見的各種圖形實例，并且會簡單封裝一下繪制各圖形的方法，最后會分享給大家一個封裝好的快速繪制多邊形的方法。
開始之前
//獲取canvas容器
var can = document.getElementById('canvas');
//創(chuàng)建一個畫布
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'）。
實例如下圖所示：
繪制三角形
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)-三角形的三個點的坐標；color-繪制顏色；type-繪制類型（'fill'和'stroke'）。
實例如下圖所示：
繪制（圓角）矩形
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-左上角點的坐標；width、height-寬高；radius-圓角；color-繪制顏色；type-繪制類型（'fill'和'stroke'）。
實例如下圖所示：
繪制多邊形
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; //圖形邊的個數(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ù)說明：
ctx: canvas畫布
conf: 配置項，提供以下一些配置
- x： 中心點橫坐標
- y： 中心點縱坐標
- num: 多邊形的邊數(shù)
- r：多邊形的半徑長度
- 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é)語
我們總結(jié)一下，使用canvas繪制圖形就是那幾個函數(shù)：beginPath、arc、moveTo、lineTo、closePath、fill、stroke。當我們能夠熟練掌握并運用自如的時候，就能夠獨當一面了。加油吧，騷年們！
本文涉及的代碼我已經(jīng)上傳至github，項目代碼github地址，喜歡的同學點個Star，多謝多謝～
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要介紹了JS簡單實現(xiàn)表格排序功能,涉及javascript針對頁面元素的遍歷、判斷與排序相關操作技巧,需要的朋友可以參考下2016-12-12
這篇文章主要給大家介紹了關于uniapp項目引入?js文件以及全局使用方法的相關資料,在Uniapp中引入JS文件是一項常見的操作,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了javascript如何返回字符串的所有排列問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了原生JS實現(xiàn)日歷組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章給大家總結(jié)了關于JS動畫中定時器的相關用法以及相關知識點總結(jié)，有需要的朋友可以參考學習下。2018-03-03
這篇文章主要為大家詳細介紹了TypeScript中字符串的常用操作，例如substring、indexOf、slice、replace等，感興趣的小伙伴可以跟隨小編一起學習一下2023-08-08
JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實例分析【 5 個區(qū)別】
這篇文章主要介紹了JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別,結(jié)合實例形式分析了JS箭頭函數(shù)和常規(guī)函數(shù)之間的 5 個區(qū)別與相關使用注意事項,需要的朋友可以參考下2020-05-05
本篇文章主要是對js保留小數(shù)點后幾位的寫法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JavaScript如何刪除數(shù)組元素(總結(jié)篇)
在JavaScript中,除了Object之外,Array類型恐怕就是最常用的類型了,與其他語言的數(shù)組有著很大的區(qū)別,JavaScript中的Array非常靈活,今天我就來總結(jié)了一下JavaScript中Array刪除的方法,感興趣的朋友跟隨小編一起看看吧2023-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)小時鐘效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03