HTML5 Canvas自訂圓角矩形與虛線範例程式碼_html5教學技巧

WBOY

發布： 2016-05-16 15:49:04

原創

1673 人瀏覽過

HTML5 Canvas自訂圓角矩形與虛線(RoundedRectangle and Dash Line)

實作在HTML Canvas 2d context繪製物件中新增自訂的函數功能演示，如何繪製虛線以及控制虛線間隔大小，學會繪製圓角矩形的技巧。

HTML5 Canvas繪製物件中提供的原生功能沒有實現繪製圓角矩形與虛線的功能，但是透過JavaScript語言的Object.prototype可以實現對物件CanvasRenderingContext2D添加這兩個函數功能。代碼的演示效果如下：

組件fishcomponent.js的代碼如下：

複製代碼

程式碼如下:

CanvasRenderingContext2D.prototype.roundRect =
function(x, y, width, height, radius, fill, stroke) {
type " _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 (type definedoo ") {
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 var deltay = (dy/distance) * pattern;
var deltax = (dx/distance) * pattern;
// draw dash line
this.beginPath();
for(var dl=0; dl if(dl%2) {
this.lineTo(fromX dl*deltax, fromY dl*deltay);
} else {
this.moveTo(fromX dl* deltax, fromY dl*deltay);
}
}
this.stroke();
};

HTML中呼叫示範：

複製代碼

代碼如下:

Canvas Rounded Rectangle Demo

<script> var ctx = null; // global variable 2d context var imageTexture = null; window.onload = function() { var canvas = documvarent .getElementById("text_canvas"); console.log(canvas.parentNode.clientWidth); canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientWidth; canvas.height = canvas.client; >if (!canvas.getContext) { console.log("Canvas not supported. Please install a HTML5 compatible browser."); return; } var context = canvas.getContext( '2d'); context.strokeStyle="red"; context.fillStyle="RGBA(100,255,100, 0.5)"; context.roundRect(50, 50, 1505, 150, true, true, true ); context.strokeStyle="blue"; for(var i=0; i<10; i ) { var delta = i*20; var pattern = i*2 1 ; context.dashedLineTo(250, 50 delta, 550, 50 delta, pattern); } <body> </script>

HTML5 Canvas Dash-line Demo - By Gloomy Fish

Dash line and Rounded Rectangle

登入後複製