Comentario: Las funciones nativas proporcionadas en los objetos de dibujo de lona HTML5 no se dan cuenta de la función de dibujar rectángulos redondeados y líneas punteadas. A través del objeto.prototipo de JavaScript, puede agregar estas dos funciones al objeto CanvasRenderingContext2D. La implementación específica es la siguiente. Los amigos interesados pueden referirse a él.
Lienzo html5 rectángulo redondeado personalizado y línea de tablero (redondeada y línea de tablero)Implemente una demostración de agregar funciones de función personalizada al objeto de dibujo de contexto HTML Canvas 2D, cómo dibujar líneas punteadas y controlar el tamaño de las líneas punteadas, y aprender las habilidades de dibujar rectángulos redondeados.
Las funciones nativas proporcionadas en los objetos de dibujo de lona HTML5 no se dan cuenta de la función de dibujar rectángulos redondeados y líneas punteadas, pero el objeto de lenguaje JavaScript. El prototipo se puede usar para agregar estas dos funciones al objeto CanvasRenderingContext2D. El efecto de demostración del código es el siguiente:
El código de componente FishComponent.js es el siguiente:
CanvasrenderingContext2d.prototype.roundrect =
función (x, y, ancho, altura, radio, relleno, trazo) {
if (typeof stroke == "indefinido") {
accidente cerebrovascular = verdadero;
}
if (typeof radio === "indefinido") {
radio = 5;
}
this.beginpath ();
this.moveto (x + radio, y);
this.lineto (x + ancho - radio, y);
this.quadraticCurveto (ancho x +, y, x + ancho, y + radio);
this.lineto (x + ancho, y + altura - radio);
this.quadraticCurveto (x + ancho, y + altura, x + ancho - radio, y + altura);
this.lineto (x + radio, y + altura);
this.quadraticCurveto (x, y + altura, x, y + altura - radio);
this.lineto (x, y + radio);
this.quadraticCurveto (x, y, x + radio, y);
this.ClosePath ();
if (Stroke) {
this.stroke ();
}
if (llenar) {
this.fill ();
}
};
CanvasrenderingContext2d.prototype.Dashedlineto = function (fromx, fromy, tox, juguete, patrón) {
// Distancia de intervalo predeterminada -> 5px
if (typeof patrón === "indefinido") {
patrón = 5;
}
// Calcule el Delta X y Delta Y
var dx = (tox - fromx);
var dy = (juguete - fromy);
var de var = math.floor (math.sqrt (dx*dx + dy*dy));
var dashlineInseveral = (patrón <= 0)? distancia: (distancia/patrón);
var deltay = (dy/distancia) * patrón;
var deltax = (dx/distancia) * patrón;
// dibujar línea de tablero
this.beginpath ();
for (var dl = 0; dl <dashlineInseveral; dl ++) {
if (dl%2) {
this.lineto (fromx + dl*deltax, fromy + dl*deltay);
} demás {
this.moveto (fromx + dl*deltax, fromy + dl*deltay);
}
}
this.stroke ();
};
Demostración de llamada en html:
<! Doctype html>
<html>
<Evista>
<meta http-oquiv = "x-ua-compatible" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Canvas Rounded Rectangle Demo </title>
<script src = "fishComponent.js"> </script>
<link href = "default.css" />
<script>
var ctx = null; // Contexto 2D variable global
var imageteTexture = 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 ("lienzo no es compatible. Instale un navegador compatible HTML5");
devolver;
}
var context = Canvas.getContext ('2d');
context.strokestyle = "rojo";
context.fillStyle = "RGBA (100,255,100, 0.5)";
context.roundrect (50, 50, 150, 150, 5, verdadero);
context.strokestyle = "azul";
para (var i = 0; i <10; i ++) {
var delta = i*20;
patrón var = i*2+1;
context.Dashedlineto (250, 50+delta, 550, 50+delta, patrón);
}
}
</script>
</ablo>
<Body>
<h1> Demostración de línea de lona HTML5 - por pescado sombrío </h1>
<pre> línea de tablero y rectángulo redondeado </pre>
<div>
<Canvas> </Canvas>
</div>
</body>
</html>