本篇文章為大家展示了HTML5 中怎么利用Canvas自定義圓角矩形，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、建華ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的建華網(wǎng)站制作公司

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

上述內(nèi)容就是HTML5 中怎么利用Canvas自定義圓角矩形，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。