Comentário: As funções nativas fornecidas nos objetos de desenho de tela HTML5 não percebem a função de desenhar retângulos arredondados e linhas pontilhadas. Através do objeto.Prototipo do JavaScript, você pode adicionar essas duas funções ao objeto CanvasRanderingContext2D. A implementação específica é a seguinte. Amigos interessados podem se referir a ele.
HTML5 Linha de retângulo e traço barraca personalizada (RoundedRectangle e Dash Line)Implemente uma demonstração da adição de funções de função personalizada ao objeto de desenho de contexto 2D HTML 2D, como desenhar linhas pontilhadas e controlar o tamanho das linhas pontilhadas e aprender as habilidades de desenhar retângulos arredondados.
As funções nativas fornecidas nos objetos de desenho de tela HTML5 não realizam a função de desenhar retângulos arredondados e linhas pontilhadas, mas o objeto de linguagem JavaScript.Prototype pode ser usado para adicionar essas duas funções ao objeto canvasRanderingContext2D. O efeito de demonstração de código é o seguinte:
O código de componente FishComponent.js é o seguinte:
CanvasRanderingContext2D.prototype.RoundRect =
função (x, y, largura, altura, raio, preenchimento, golpe) {
if (typeof stroke == "indefinido") {
AVC = verdadeiro;
}
if (tipoof raio === "indefinido") {
raio = 5;
}
this.BeginPath ();
this.moveto (x + raio, y);
this.lineto (x + largura - raio, y);
this.quadraticcurveto (x + largura, y, x + largura, y + raio);
this.lineto (x + largura, y + altura - raio);
this.quadraticcurveto (x + largura, y + altura, x + largura - raio, y + altura);
this.lineto (x + raio, y + altura);
this.quadraticcurveto (x, y + altura, x, y + altura - raio);
this.lineto (x, y + raio);
this.quadraticcurveto (x, y, x + raio, y);
this.ClosePath ();
if (golpe) {
this.stroke ();
}
se (preencher) {
this.fill ();
}
};
CanvasRanderingContext2d.prototype.dashedlineTo = função (Fromx, Fromy, Tox, Toy, Pattern) {
// Distância do intervalo padrão -> 5px
if (tipoof padrão === "indefinido") {
padrão = 5;
}
// calcule o delta x e o delta y
var dx = (tox - fromx);
var dy = (brinquedo - dey);
var distase = math.floor (math.sqrt (dx*dx + dy*dy));
varnhlineInteveral = (padrão <= 0)? distância: (distância/padrão);
var deltay = (dy/distância) * padrão;
var deltax = (dx/distância) * padrão;
// Draw Dash Line
this.BeginPath ();
for (var dl = 0; dl <DropInteveral; dl ++) {
if (dl%2) {
this.lineTo (Fromx + dl*deltax, dey + dl*deltay);
} outro {
this.moveto (fromx + dl*deltax, fromy + dl*deltay);
}
}
this.stroke ();
};
Demonstração de chamada em HTML:
<! Doctype html>
<html>
<head>
<meta http-equiv = "x-ua compatível com" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Demo de retângulo arredondado de tela </ititle>
<script src = "fishcomponent.js"> </sCript>
<link href = "default.css" />
<Cript>
var ctx = null; // contexto 2D variável global
var imageTexture = null;
window.onload = function () {
var Canvas = document.getElementById ("text_canvas");
console.log (canvas.parentnode.clientWidth);
canvas.width = canvas.parentnode.clientWidth;
canvas.Height = Canvas.parentnode.clientHeight;
if (! Canvas.getContext) {
console.log ("Canvas não suportadas. Instale um navegador compatível com HTML5.");
retornar;
}
var context = Canvas.getContext ('2D');
context.strokestyle = "vermelho";
context.fillstyle = "rgba (100.255.100, 0,5)";
context.RoundRect (50, 50, 150, 150, 5, verdadeiro);
context.strokestyle = "azul";
for (var i = 0; i <10; i ++) {
var delta = i*20;
var padrão = i*2+1;
Context.Dashedlineto (250, 50+delta, 550, 50+delta, padrão);
}
}
</script>
</head>
<Body>
<h1> HTML5 Demo de linha de traço de tela - por peixes sombrios </h1>
<pre> linha de traço e retângulo arredondado </pre>
<div>
<lVAs> </canvas>
</div>
</body>
</html>