Canvas學習記錄之rect

最新更新時間：2020年03月14日14:29:22

《猛戳-查看我的博客地圖-總有你意想不到的驚喜》

本文內容：本文介紹基於rect()繪製矩形路徑的一些基本用法，矩形、正方形、圓角矩形、線性漸變矩形、輻射漸變圓形

rect

• 繪製一個矩形，四個入參依次爲：起始點x軸座標 (起始點爲矩形左上角定點)、起始點y軸座標、寬度、高度
• canvas畫布的原點座標(0,0)爲左上角

ctx.rect(x, y, width, height);

• 繪製一個矩形路徑

ctx.rect(10, 10, 100, 50);
ctx.lineWidth =1;
ctx.strokeStyle = '#000';
ctx.stroke();

• 繪製一個正方形路徑

ctx.rect(10, 10, 100, 100);
ctx.lineWidth =1;
ctx.strokeStyle = '#000';
ctx.stroke();

• 繪製一個填充矩形

ctx.rect(10, 10, 100, 50);
ctx.fillStyle = '#7FFFAA';
ctx.fill();

• clearRect(x, y, width, height);

• 以矩形擦除畫布之前繪製的所有內容，像素變成透明
• 四個入參依次爲：矩形起點的 x 軸座標、矩形起點的 y 軸座標、矩形的寬度、矩形的高度。

ctx.fillStyle = '#7FFFAA';
ctx.fillRect(10, 10, 100, 50);
ctx.clearRect(0,0,60,35);

圓角

• 繪製一個圓角矩形

畫布原點座標(0,0)，矩形左上角座標(10,10)，寬100，高50，圓角半徑5

//矩形起始座標(10,10)
let x =10;
let y = 10;
//圓角半徑5
let r = 5;
//矩形寬高
let w = 100;
let h = 50;
//開始新路徑
ctx.beginPath();
//左上角圓角
ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
//矩形上邊線
ctx.lineTo(x+w-r, y);
//右上角圓角
ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
//矩形右邊線
ctx.lineTo(x+w, y+h-r);
//右下角圓角
ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
//矩形下邊線
ctx.lineTo(x+r, y+h);
//左下角圓角
ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
//矩形左邊線
ctx.lineTo(x, y+r);//最後一條邊線可用 ctx.closePath() 完成繪製
//線寬
ctx.lineWidth = 1;
//線條色值
ctx.strokeStyle = '#000';
//畫線
ctx.stroke();

• 繪製一個填充圓角矩形

畫布原點座標(0,0)，矩形左上角座標(10,10)，寬100，高50，圓角半徑5

//矩形起始座標(10,10)
let x =10;
let y = 10;
//圓角半徑5
let r = 5;
//矩形寬高
let w = 100;
let h = 50;
//開始新路徑
ctx.beginPath();
//左上角圓角
ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
//矩形上邊線
ctx.lineTo(x+w-r, y);
//右上角圓角
ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
//矩形右邊線
ctx.lineTo(x+w, y+h-r);
//右下角圓角
ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
//矩形下邊線
ctx.lineTo(x+r, y+h);
//左下角圓角
ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
//矩形左邊線
ctx.lineTo(x, y+r);//最後一條邊線可用 ctx.closePath() 完成繪製
//填充色
ctx.fillStyle = '#7FFFAA';
//填充
ctx.fill();

漸變

• createLinearGradient(x0, y0, x1, y1)

• 線性漸變，方法創建一個沿參數座標指定的直線的漸變。該方法返回一個線性 CanvasGradient對象
• 四個入參依次爲：起點 x 軸座標、起點 y 軸座標、終點的 x 軸座標、終點的 y 軸座標

• x軸方向水平方向漸變填充矩形

var gradient = ctx.createLinearGradient(0,0,100,0);
gradient.addColorStop(0,"#000");
gradient.addColorStop(1,"#ff77ff");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,100,50);

• y軸方向垂直方向漸變填充矩形

var gradient = ctx.createLinearGradient(0,0,0,50);
gradient.addColorStop(0,"#000");
gradient.addColorStop(1,"#ff77ff");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,100,50);

• 對角線方向(左上角到右下角)漸變填充矩形

var gradient = ctx.createLinearGradient(0,0,100,100);
gradient.addColorStop(0,"#000");
gradient.addColorStop(1,"#ff77ff");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,100,100);

• createRadialGradient(x0, y0, r0, x1, y1, r1)

• 放射性漸變，根據參數確定兩個圓的座標，繪製放射性漸變的方法
• 六個入參依次爲：開始圓形的 x 軸座標、開始圓形的 y 軸座標、開始圓形的半徑、結束圓形的 x 軸座標、結束圓形的 y 軸座標、結束圓形的半徑。

• 三色輻射漸變填充圓形

var gradient = ctx.createRadialGradient(50,50,50,50,50,0);
gradient.addColorStop(0,"#000");
gradient.addColorStop(0.5,"#7FFFAA");
gradient.addColorStop(1,"#ff77ff");
ctx.fillStyle = gradient;
ctx.arc(50,50,50,0,Math.PI*2);
ctx.fill();

參考資料

• CanvasRenderingContext2D - Web API 接口參考 | MDN

感謝閱讀，歡迎評論^-^

打賞我吧^-^