canvas-繪製矩形及弧形

矩形是唯一一種可以直接在 2D 上下文中繪製的形狀。與矩形有關的方法包括 fillRect（） 、strokeRect（） 和 clearRect（）

這三個方法都能接收 4 個引數：

矩形的 x 座標、矩形的 y 座標、矩形寬度和矩形高度

繪製灰色實心矩形、透明實心矩形

首先， fillRect（） 方法在畫布上繪製的矩形會填充指定的顏色。填充的顏色透過fillStyle 屬性指定

// 先設定填充色

context。fillStyle = ‘#ccc’；

// 灰色實心矩形

// 1。 語法： x座標， y座標， 寬度， 高度

context。fillRect（10， 10， 50， 50）；

// 透明實心矩形

context。fillStyle = ‘rgba（0， 0， 0， 。5）’；

context。fillRect（30， 30， 50， 50）；

繪製空心的矩形

語法： x座標， y座標， 寬度， 高度

// 1。 語法： x座標， y座標， 寬度， 高度

context。strokeStyle = ‘rgba（255， 0， 0， 1）’；

context。strokeRect（100， 10， 50， 50）；

context。strokeStyle = ‘rgba（255， 255， 0， 1）’；

context。strokeRect（120， 30， 50， 50）；

image。png

矩形路徑

ctx。rect（x， y， w， h）；

座標：（x， y）； w： 寬度 ， h： 高度

ctx。beginPath（）；

// 線條顏色

ctx。strokeStyle = ‘orange’；

// 填充顏色

ctx。fillStyle = ‘red’；

ctx。lineWidth = 2；

ctx。rect（350， 50， 100， 100）；

// 描邊

ctx。stroke（）；

// 填充

ctx。fill（）；

image。png

繪製弧形

畫弧形的語法：

從上一點（起始點） 開始繪製一條曲線，到（x2， y2）位置，並且以（x1， y1）和（x2， y2）；為控制點，radius： 弧形半徑

ctx。arcTo（x1， y1， x2， y2， radius）；

說白話： arcTo會利用起始點 ，（x1， y1）， （x2， y2）三個點，所形成的夾角，然後繪製一段與夾角兩邊相切的圓弧

image。png

弧形可以成為矩形的四個角，使其成為一個圓角矩形

ctx。beginPath（）；

ctx。lineWidth = 4；

ctx。strokeStyle=‘blue’；

// 起始點

ctx。moveTo（50， 150）；

// 左上角

ctx。arcTo（50， 100， 100， 100， 50）；

// 右上角

ctx。arcTo（250， 100， 250， 150， 50）；

// 右下角

ctx。arcTo（250， 300， 200， 300， 50）；

// 左下角

ctx。arcTo（50， 300， 50， 250， 50）；

ctx。closePath（）；

ctx。stroke（）；