canvas繪製圓角矩形程式碼例項

admin發表於2017-02-10
Canvas
分享一段簡單的程式碼例項，它實現了繪製圓角矩形的功能。

非常適合初學者瞭解相關方法和屬性的使用，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
</style>
</head>
<body bgcolor="#00aeff">
<script type="text/javascript">
var canvas = document.createElement("canvas");
var canW = canH = 600;
canvas.width = canW;
canvas.height = canH;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
 
 
var w = h = 300;                //矩形的寬高
var x = canW/2 - w/2;           //開始的x軸座標
var y = canH/2 - h/2;           //開始的y軸座標
var r = 15;                     //圓角半徑
var bdWidth = 8;                //邊框寬度
var bdColor = "f00000";         //邊框的顏色
var bgcolor = "#ffffff";        //矩形背景的顏色
 
drawRoundedRect(x,y,w,h,r,bdWidth,bdColor,bgcolor);
 
function drawRoundedRect(x,y,w,h,r,bdWidth,bdColor,bgcolor){
        ctx.beginPath();
        ctx.moveTo(x+r,y);
        ctx.lineWidth = bdWidth;
        ctx.strokeStyle = bdColor;
        ctx.fillStyle = bgcolor;
        ctx.arcTo(x+w,y,x+w,y+h,r);
        ctx.arcTo(x+w,y+h,x,y+h,r);
        ctx.arcTo(x,y+h,x,y,r);
        ctx.arcTo(x,y,x+w,y,r);
        ctx.stroke();
        ctx.fill();
        ctx.closePath();
}
</script>
</body>
</html>

相關文章