目錄
0x00 圓弧和圓角矩形
思路：
代碼：
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 689;
var ctx = canvas.getContext('2d');
fillRoundRect(ctx,100,100,100,100,10,'red');
strokeRoundRect(ctx,400,400,100,100,10);
}
function fillRoundRect(ctx,x,y,width,height,radius,fillColor){
if(2*radius > width || 2*radius >height){
return;
}
ctx.save();
ctx.translate(x,y);
pathRoundRect(ctx,width,height,radius);
ctx.fillStyle = fillColor || "black";
ctx.fill();
ctx.restore();
}
function strokeRoundRect(ctx,x,y,width,height,radius,lineWidth,strokeColor){
if(2*radius > width || 2*radius >height){
return;
}
ctx.save();
ctx.translate(x,y);
pathRoundRect(ctx,width,height,radius);
ctx.lineWidth = lineWidth || 1;
ctx.strokeStyle = strokeColor || "black";
ctx.stroke();
ctx.restore();
}
function pathRoundRect(ctx,width,height,radius){
ctx.beginPath();
ctx.arc(width-radius,height-radius,radius,0,Math.PI/2);
ctx.lineTo(radius,height);
ctx.arc(radius,height-radius,radius,Math.PI/2,Math.PI);
ctx.lineTo(0,radius);
ctx.arc(radius,radius,radius,Math.PI,Math.PI*3/2);
ctx.lineTo(width-radius,0);
ctx.arc(width-radius,radius,radius,Math.PI * 3/2,Math.PI*2);
ctx.closePath();
}
0x01 artTo() 另一種弧線繪製方法
ctx.arcTo(x1,y1,x2,y2,radius);
將當前點座標作爲x0,y0的位置，開發者傳入(x1,y1) (x2,y2)之後
將會形成由兩個線段組成的折線。然後繪製一個和兩個線段相切且半徑爲radius的弧線
注意：繪製的起始點座標是(x0,y0)這時圓弧還沒有開始，繪製的終止點座標不是(x2,y2)，而是線段2與圓弧的相切處
繪製一輪彎月：
效果：
思路：外圓用arc函數畫，內圓用arcTo函數畫
arcTo函數的半徑 利用初中數學知識算出來即可
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#canvas{
border:1px solid black;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
</body>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 689;
var ctx = canvas.getContext('2d');
fillMoon(ctx,2,400,400,50,20);
}
/**
* 繪製一輪填充的彎月
* @ ctx 繪圖上下文
* @ d 控制點座標的橫座標值
* @ x,y 彎月的位置
* @ R 彎月的半徑
* @ rot 旋轉角度 角度值
* @ fillColor 可選
*/
function fillMoon(ctx,d,x,y,R,rot,fillColor){
ctx.save();
ctx.translate(x,y);
ctx.rotate(rot * Math.PI / 180);
ctx.scale(R,R);
pathMoon(ctx,d);
ctx.fillStyle = fillColor || "#fb5";
ctx.fill();
ctx.restore();
}
/**
* 規劃彎月的路徑
*
*/
function pathMoon(ctx,d){
ctx.beginPath();
ctx.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);
ctx.moveTo(0,-1);
ctx.arcTo(d,0,0,1,dis(0,-1,d,0)/d);
ctx.closePath();
}
// 計算兩點間的距離
function dis(x1,y1,x2,y2){
return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
}
</script>
</html>
0x02 貝塞爾曲線
二次貝塞爾曲線
ctx.moveTo(x0,y0)
ctx.quadraticCurveTo(x1,y1,x2,y2)
(x0,y0) 曲線的起始點 （x1,y1）控制點
(x2,y2)曲線的終止點
貝塞爾三次曲線：
ctx.moveTo(x0,y0);
ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3);
(x1,y1)
(x2,y2)
爲兩個控制點
