關於canvas繪製線性圓角矩形,不是背景色填充類型


 
// 封裝一個函數,將用來繪製圓角矩形
function drawRoundRect(cxt, x, y, width, height, radius){
    cxt.beginPath();
    cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
    cxt.lineTo(width - radius + x, y);
    cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
    cxt.lineTo(width + x, height + y - radius);
    cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
    cxt.lineTo(radius + x, height +y);
    cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
    cxt.closePath();
}
// 獲得參數
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,200,200);  // 畫了一個矩形框

drawRoundRect(context, 200, 200, 150, 30, 4);
// 這裏的參數表示:context必不用說,200,200, 表示的是矩形的左上角距離canvas的左頂點
//的距離,150,30 表示的是所 要繪製的矩形的寬高,4表示的是radius
context.strokeStyle = "#0078AA";
context.stroke();
特此記錄

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章