canvas實(shí)用技巧及案例2
本次來介紹一下實(shí)心圓與線圓及各種弧線的制作方法，首先科普一下相關(guān)知識
arc()方法可以創(chuàng)建用于制作圓形和部分圓形
語法：arc(x,y,radius,startAngle,endAngle,anticlockwise);
其中x為圓心x軸坐標(biāo)，y為圓心y軸的坐標(biāo)，radius為圓形的半徑，startAngle為圓形開始角度，endAngle為圓形結(jié)束的角度，anticlockwise判斷是順時針還是逆時針，如何是true為逆時針畫圓，false則為順時針畫圓。
arcTo() 方法在畫布上創(chuàng)建介于兩個切線之間的弧/曲線。
語法：arcTo(x1,y1,x2,y2,r);
x1：弧的起點(diǎn)的 x 坐標(biāo)。y1：弧的起點(diǎn)的 y 坐標(biāo)。x2：弧的終點(diǎn)的 x 坐標(biāo)。y2：弧的終點(diǎn)的 y 坐標(biāo)。r：弧的半徑。
quadraticCurveTo() 方法通過使用表示二次貝塞爾曲線的指定控制點(diǎn)，向當(dāng)前路徑添加一個點(diǎn)。
二次貝塞爾曲線需要兩個點(diǎn)。第一個點(diǎn)是用于二次貝塞爾計算中的控制點(diǎn)，第二個點(diǎn)是曲線的結(jié)束點(diǎn)。曲線的開始點(diǎn)是當(dāng)前路徑中最后一個點(diǎn)。如果路徑不存在，那么請使用 beginPath() 和 moveTo() 方法來定義開始點(diǎn)。
開始點(diǎn)：
moveTo(20,20)
控制點(diǎn)：
quadraticCurveTo(20,100,200,20)
結(jié)束點(diǎn)：
quadraticCurveTo(20,100,200,20)
語法：quadraticCurveTo(cpx,cpy,x,y);
cpx:
貝塞爾控制點(diǎn)的 x 坐標(biāo)。
cpy:
貝塞爾控制點(diǎn)的 y 坐標(biāo)。
x:
結(jié)束點(diǎn)的 x 坐標(biāo)。
y:
結(jié)束點(diǎn)的 y 坐標(biāo)。
bezierCurveTo() 方法通過使用表示三次貝塞爾曲線的指定控制點(diǎn)，向當(dāng)前路徑添加一個點(diǎn)。
三次貝塞爾曲線需要三個點(diǎn)。前兩個點(diǎn)是用于三次貝塞爾計算中的控制點(diǎn)，第三個點(diǎn)是曲線的結(jié)束點(diǎn)。曲線的開始點(diǎn)是當(dāng)前路徑中最后一個點(diǎn)。如果路徑不存在，那么請使用 beginPath() 和 moveTo() 方法來定義開始點(diǎn)。
開始點(diǎn)：
moveTo(20,20)
控制點(diǎn) 1：
bezierCurveTo(20,100,200,100,200,20)
控制點(diǎn) 2：
bezierCurveTo(20,100,200,100,200,20)
結(jié)束點(diǎn)：
bezierCurveTo(20,100,200,100,200,20)
語法：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
其中
cp1x:
第一個貝塞爾控制點(diǎn)的 x 坐標(biāo)。
cp1y:
第一個貝塞爾控制點(diǎn)的 y 坐標(biāo)。
cp2x:
第二個貝塞爾控制點(diǎn)的 x 坐標(biāo)。
cp2y:
第二個貝塞爾控制點(diǎn)的 y 坐標(biāo)。
x:
結(jié)束點(diǎn)的 x 坐標(biāo)。
y:
結(jié)束點(diǎn)的 y 坐標(biāo)。
如果理解起來有難度的話，咱們來寫點(diǎn)代碼就知道什么意思了。首先咱們來繪制實(shí)心圓，代碼如下：
首先還是先在body里面寫上canvas標(biāo)簽，并配置相應(yīng)寬高
<canvas id="aaa" width="900" height="500""></canvas>
然后在javascript里寫
var c = document.getElementById("aaa");
var context = c.getContext('2d');
工作結(jié)后開始繪制圓啦。注意！以上步驟是在canvas畫布上畫東西的必要操作！
//繪制實(shí)心圓
context.beginPath();
context.fillStyle = "red";
context.arc(151,151,150,0,2*Math.PI,true);
context.closePath();
context.fill();
繪制線圓，要注意，繪制下一個圖形前要隱藏上一個圖形的代碼哦
//繪制線圓
context.strokeStyle="#1B8DCC";
context.arc(151,151,150,0,2*Math.PI,true);
context.stroke();
高能來了！！！用之前所說的圓的制作方式，再利用貝塞爾二次元及三次元曲線，咱們來繪制一片葉子，先看效果圖
以下部分是代碼
//繪制葉子
context.moveTo(100,300);
context.arcTo(100,0,400,100,200); //繪制圓弧
context.stroke();
context.moveTo(100,300);
context.bezierCurveTo(150,230,350,350,364,88); //貝塞爾三次元曲線
context.stroke();
context.moveTo(100,300);
context.quadraticCurveTo(150,180,364,88); //貝塞爾二次元曲線
context.stroke();
context.moveTo(130,250);
context.quadraticCurveTo(160,200,250,265);
context.stroke();
context.moveTo(190,190);
context.quadraticCurveTo(220,150,340,195);
context.stroke();
context.moveTo(230,160);
context.quadraticCurveTo(220,130,250,84);
context.stroke();
context.moveTo(150,225);
context.quadraticCurveTo(130,200,180,115);
context.stroke();
//繪制葉子結(jié)束
怎么樣，你自己的葉子做出來了嗎，你可以改改里面的數(shù)值看看效果怎么樣哦。如果上面的做完了，可以看下面的，用所知道的知識來繪制一個線性八卦圖和實(shí)心黑白八卦圖，最終結(jié)果如下
以下為線性八卦圖代碼
//繪制線性八卦圖
context.beginPath();
context.arc(150,150,150,0,2*Math.PI,true); //繪制外圓
context.moveTo(150,0);
context.bezierCurveTo(0,150,300,150,150,300); //繪制S形曲線
context.stroke();
context.closePath();
context.beginPath();
context.arc(200,75,20,0,2*Math.PI,true); //繪制小圓
context.stroke();
context.closePath();
context.beginPath();
context.arc(100,225,20,0,2*Math.PI,true); //繪制小圓
context.stroke();
context.closePath();
//繪制線性八卦圖結(jié)束
以下為實(shí)心黑白八卦圖代碼，實(shí)心八卦圖全是通過用arc()方法畫圓組合而成，兩個黑白半圓，兩個黑白半小圓，兩個黑白整圓
//實(shí)心八卦圖
context.beginPath();
context.fillStyle = '#000';
context.arc(200,200,200,1.5*Math.PI,0.5*Math.PI,true);//黑半圓
context.closePath();
context.fill();
context.beginPath();
context.fillStyle = '#eee';
context.arc(200,200,200,1.5*Math.PI,0.5*Math.PI,false);//白半圓
context.closePath();
context.fill();
context.beginPath();
context.fillStyle = '#000';
context.arc(200,300,100,0.5*Math.PI,1.5*Math.PI,true);//黑小半圓
context.closePath();
context.fill();
context.beginPath();
context.fillStyle = '#eee';
context.arc(200,100,100,0.5*Math.PI,1.5*Math.PI,false);//白小半圓
context.closePath();
context.fill();
context.beginPath();
context.fillStyle = '#000';
context.arc(200,100,20,0,2*Math.PI,false);//黑小整圓
context.closePath();
context.fill();
context.beginPath();
context.fillStyle = '#eee';
context.arc(200,300,20,0,2*Math.PI,false);//白小整圓
context.closePath();
context.fill();
//實(shí)心八卦圖繪制結(jié)束
看懂了嗎？如果有什么不懂得可以給我發(fā)郵箱或者關(guān)注我的微博私聊我哦，相信我是有耐心給你解答的！【這是一個斜眼笑的表情】
文章轉(zhuǎn)自https://royalzhao.github.io/
