Комментарий: Нативные функции, представленные в объектах рисования HTML5 Canvas, не осознают функцию рисования закругленных прямоугольников и пунктирных линий. Через объект. Прототип JavaScript, вы можете добавить эти две функции в объект CanvasRenderingContext2d. Конкретная реализация заключается в следующем. Заинтересованные друзья могут ссылаться на это.
HTML5 Canvas Custom Custom Roundered прямоугольник и проборка (Roundrectangle и проборка)Реализуйте демонстрацию добавления пользовательских функций функций к объекту рисования HTML Canvas 2D, как нарисовать пунктирные линии и контролировать размер пунктирных линий и изучить навыки рисования закругленных прямоугольников.
Нативные функции, представленные в объектах чертежа HTML5 Canvas, не реализуют функцию рисования закругленных прямоугольников и пунктирных линий, но объект языка JavaScript. Эффект демонстрации кода выглядит следующим образом:
Код компонента FishComponent.js выглядит следующим образом:
CanvasRenderingContext2D.Prototype.RoundRect =
Функция (x, y, ширина, высота, радиус, заполнение, ход) {
if (typeOf chuck == "undefined") {
Инсульт = правда;
}
if (typeof radius === "undefined") {
радиус = 5;
}
this.beginpath ();
this.moveto (x + radius, y);
this.lineto (x + width - radius, y);
this.quadraticcurveto (x + width, y, x + width, y + радиус);
this.lineto (x + width, y + height - радиус);
this.quadraticcurveto (x + width, y + height, x + width - radius, y + height);
this.lineto (x + радиус, y + высота);
this.quadraticcurveto (x, y + height, x, y + height - радиус);
this.lineto (x, y + radius);
this.quadraticcurveto (x, y, x + radius, y);
this.closepath ();
if (ход) {
this.Stroke ();
}
if (fill) {
this.fill ();
}
};
CanvasRenderingContext2d.prototype.dashedlineto = function (fromx, fromy, tox, toy, pattern) {
// Расстояние интервала по умолчанию -> 5px
if (typeof pattern === "undefined") {
шаблон = 5;
}
// Рассчитайте Delta X и Delta Y
var dx = (tox - fromx);
var dy = (игрушка - от);
var distance = math.floor (math.sqrt (dx*dx + dy*dy));
var dashlineinteveral = (pattern <= 0)? Расстояние: (расстояние/шаблон);
var deltay = (dy/distance) * pattern;
var deltax = (dx/distance) * pattern;
// рисовать линию приборной панели
this.beginpath ();
for (var dl = 0; dl <dashlineInteveral; dl ++) {
if (dl%2) {
this.lineto (fromx + dl*deltax, fromy + dl*deltay);
} еще {
this.moveto (fromx + dl*deltax, fromy + dl*deltay);
}
}
this.Stroke ();
};
Демонстрация вызова в HTML:
<! Doctype html>
<html>
<голова>
<meta http-equiv = "x-ua-совместимый" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<Title> Canvas закругленная прямоугольная демонстрация </title>
<script src = "fishcomponent.js"> </script>
<link href = "default.css" />
<Скрипт>
var ctx = null; // глобальная переменная 2D контекст
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 не поддерживается. Пожалуйста, установите браузер, совместимый с HTML5.»);
возвращаться;
}
var context = canvas.getContext ('2d');
context.strokestyle = "red";
context.fillstyle = "rgba (100 255,100, 0,5)";
context.roundrect (50, 50, 150, 150, 5, true);
context.strokestyle = "Blue";
для (var i = 0; i <10; i ++) {
var delta = i*20;
var pattern = i*2+1;
context.dashedlineto (250, 50+delta, 550, 50+delta, шаблон);
}
}
</script>
</head>
<тело>
<h1> html5 canvas dash -line demo - от мрачной рыбы </h1>
<pre> черта и округлый прямоугольник </pre>
<div>
<Canvas> </canvas>
</div>
</body>
</html>