前端之canvas詳解(二)——圓和矩形的畫法
一、用canvas畫圓弧
用canvas畫圓弧畫圓弧有兩種方法:
1、arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 為圓心,以r 為半徑,從 startAngle 弧度開始到endAngle弧度結束。anticlosewise 是布林值,true 表示逆時針,false 表示順時針(預設是順時針)。
startAngle,endAngle是弧度,用角度時候如下所示(Math.PI / 180) * angle,angle換成角度即可。
arc(x0, y0, r1, (Math.PI / 180) * 35, (Math.PI / 180) * 145, false);
角度是以x軸正方向為0°,x軸負方向是180°,正好用canvas畫了個圖,現學現用。至於哪邊是順時針還是逆時針,看你的anticlockwise 引數了。
function draw(){
var canvas = document.getElementById('canvas'); // 獲取canvas標籤
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d');
// 畫的x軸
ctx.moveTo(60,150);
ctx.lineTo(240,150);
ctx.stroke();
// 畫的y軸
ctx.moveTo(150,60);
ctx.lineTo(150,240);
ctx.stroke();
// 畫的圓
ctx.beginPath();
ctx.arc(150, 150, 60, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
ctx.closePath();
ctx.stroke();
// 畫的畫的x軸箭頭
ctx.beginPath();
ctx.moveTo(240,145);
ctx.lineTo(240,155);
ctx.lineTo(250,150);
ctx.closePath();
ctx.stroke();
ctx.fill()
// 畫的畫的y軸箭頭
ctx.beginPath();
ctx.moveTo(145,60);
ctx.lineTo(155,60);
ctx.lineTo(150,50);
ctx.closePath();
ctx.stroke();
ctx.fill()
// 標上"0","180"
ctx.fillText("0", 240, 170);
ctx.fillText("180", 60, 170);
}
draw()
注意:ctx.beginPath();ctx.closePath();有時候感覺可有可無。最好還是用上,因為不結束路徑,有時候你再次畫線會和上次的線連上了。
2、arcTo(x1, y1, x2, y2, radius): 根據給定的控制點和半徑畫一段圓弧,最後再以直線連線兩個控制點。
function draw(){
var canvas = document.getElementById('canvas');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
//引數1、2:控制點1座標 引數3、4:控制點2座標 引數4:圓弧半徑
ctx.arcTo(200, 50, 200, 200, 100);
ctx.lineTo(200, 200)
ctx.stroke();
ctx.beginPath();
ctx.rect(50, 50, 10, 10);
ctx.rect(200, 50, 10, 10)
ctx.rect(200, 200, 10, 10)
ctx.fill()
}
draw();
arcTo 方法的說明:
這個方法可以這樣理解。繪製的弧形是由兩條切線所決定。
第 1 條切線:起始點和控制點1決定的直線。
第 2 條切線:控制點1 和控制點2決定的直線。
其實繪製的圓弧就是與這兩條直線相切的圓弧
二、用canvas畫矩形
canvast 提供了三種繪製矩形的方法:
- 1、fillRect(x, y, width, height):繪製一個填充的矩形。
- 2、strokeRect(x, y, width, height):繪製一個矩形的邊框。
- 3、clearRect(x, y, width, height):清除指定的矩形區域,然後這塊區域會變的完全透明。
function draw(){
var canvas = document.getElementById('canvas');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillRect(10, 10, 100, 50); // 繪製矩形,填充的預設顏色為黑色
ctx.strokeRect(10, 70, 100, 50); // 繪製矩形邊框
ctx.clearRect(20, 20, 40, 30) // 清除一個矩形區域
}
draw();
畫一個漸變色的矩形。
function draw(){
var canvas = document.getElementById('canvas');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
// 建立漸變的樣式1
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"white");
// 建立漸變的樣式2
var rrd=ctx.createLinearGradient(0,200,0,0);
rrd.addColorStop(0,"red");
rrd.addColorStop(1,"white");
// 建立漸變的樣式3
var crd=ctx.createRadialGradient(155,130,10,155,130,100);
crd.addColorStop(0,"blue");
crd.addColorStop(1,"white");
ctx.fillStyle=grd; // 用第一種樣式畫矩形
ctx.fillRect(10,10,150,80);
ctx.fillStyle=rrd;// 用第二種樣式畫矩形
ctx.fillRect(10,100,80,150);
ctx.fillStyle=crd;// 用第三種樣式畫矩形
ctx.fillRect(80,100,150,60);
}
draw();
漸變可以填充在矩形, 圓形, 線條, 文字等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來設定Canvas漸變:
- createLinearGradient(x,y,x1,y1) - 建立線條漸變
- createRadialGradient(x,y,r,x1,y1,r1) - 建立一個徑向/圓漸變
當我們使用漸變物件,必須使用兩種或兩種以上的停止顏色。
addColorStop()方法指定顏色停止,引數使用座標來描述,可以是0至1.
使用漸變,設定fillStyle或strokeStyle的值為 漸變,然後繪製形狀,如矩形,文字,或一條線。
Canvas 繪製文字
使用 canvas 繪製文字,重要的屬性和方法如下:
- font - 定義字型
- fillText(text,x,y) - 在 canvas 上繪製實心的文字
- strokeText(text,x,y) - 在 canvas 上繪製空心的文字
function draw(){
var canvas = document.getElementById('canvas');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.font="20px Arial";
ctx.fillText("美好的一天!",10,50);
ctx.font="30px Arial";
ctx.strokeText("美好的一天!",10,100);
}
draw();
本文首發今日頭條,有興趣可在頭條搜尋使用者,洛海之音