鍍金池/ 問答/HTML5  HTML/ 請(qǐng)問canvas如果畫轉(zhuǎn)彎運(yùn)動(dòng)

請(qǐng)問canvas如果畫轉(zhuǎn)彎運(yùn)動(dòng)

我現(xiàn)在畫的是這樣的

clipboard.png
http://output.jsbin.com/rosoq...

我想在四個(gè)角平滑的轉(zhuǎn)彎,應(yīng)該怎么辦呢
圖片描述

回答
編輯回答
傲嬌范

圓弧直接用用 arcTo 函數(shù), 送你一個(gè)圓角矩形路徑函數(shù)

function roundRect(x, y, w, h, radius) {
    this.moveTo(x, y + h - radius[3]);
    this.arcTo(x, y, x + 1, y, radius[0]);
    this.arcTo(x + w, y, x + w, y + 1, radius[1]);
    this.arcTo(x + w, y + h, x - 1, y + h, radius[2]);
    this.arcTo(x, y + h, x, y, radius[3]);
}

roundRect.call(ctx,0,0,100,100,[10,10,10,10]) //四個(gè)角弧度半徑都是 10 的圓角矩形
2017年10月4日 14:22
編輯回答
夏夕

貝賽爾曲線了解一下 例子我就不寫了,網(wǎng)上隨便找了一個(gè)教程。

https://github.com/hujiulong/...

2017年4月23日 00:26