這篇文章主要介紹“HTML5如何利用Canvas自定義圓角矩形”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“HTML5如何利用Canvas自定義圓角矩形”文章能幫助大家解決問題。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺(tái)小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了海州免費(fèi)建站歡迎大家使用！

HTML5 Canvas自定義圓角矩形與虛線(RoundedRectangle and Dash Line)
實(shí)現(xiàn)向HTML Canvas 2d context繪制對(duì)象中添加自定義的函數(shù)功能演示，如何繪制虛線以及控制虛線間隔大小，學(xué)會(huì)繪制圓角矩形的技巧。
HTML5 Canvas繪制對(duì)象中提供的原生功能沒有實(shí)現(xiàn)繪制圓角矩形與虛線的功能，但是通過JavaScript語言的Object.prototype可以實(shí)現(xiàn)對(duì)對(duì)象CanvasRenderingContext2D添加這兩個(gè)函數(shù)功能。代碼的演示效果如下：
 
組件fishcomponent.js的代碼如下：

代碼如下:

CanvasRenderingContext2D.prototype.roundRect =
function(x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined") {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
this.beginPath();
this.moveTo(x + radius, y);
this.lineTo(x + width - radius, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius);
this.lineTo(x + width, y + height - radius);
this.quadraticCurveTo(x + width, y + height, x + width - radius, y+ height);
this.lineTo(x + radius, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius);
this.lineTo(x, y + radius);
this.quadraticCurveTo(x, y, x + radius, y);
this.closePath();
if (stroke) {
this.stroke();
}
if (fill) {
this.fill();
}
};
CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) {
// default interval distance -> 5px
if (typeof pattern === "undefined") {
pattern = 5;
}
// calculate the delta x and delta y
var dx = (toX - fromX);
var dy = (toY - fromY);
var distance = Math.floor(Math.sqrt(dx*dx + dy*dy));
var dashlineInteveral = (pattern <= 0) ? distance : (distance/pattern);
var deltay = (dy/distance) * pattern;
var deltax = (dx/distance) * pattern;
// draw dash line
this.beginPath();
for(var dl=0; dlif(dl%2) {
this.lineTo(fromX + dl*deltax, fromY + dl*deltay);
} else {
this.moveTo(fromX + dl*deltax, fromY + dl*deltay);
}
}
this.stroke();
};

HTML中調(diào)用演示：

代碼如下:

HTML5 Canvas Dash-line Demo - By Gloomy Fish

Dash line and Rounded Rectangle

關(guān)于“HTML5如何利用Canvas自定義圓角矩形”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。