Комментарий: В этой статье подробно подробно рассказывается о последствиях HTML5 Canvas Fill and Inscle Text Effect. Основываясь на холсте, как достичь наполнения текстур и инсульта, наполнения цветов и инсульта, конкретный код заключается в следующем. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для всех.
Продемонстрируйте эффекты заливки холста HTML5 и текстовые текстовые эффекты, исходя из того, как Canvas реализует текстуру заполнения и инсульт.1: Цветная заполнение и ход
Цветная начинка может быть достигнута с помощью заполнения, и цвет инсульта может быть достигнут с помощью Strokestyle. Простой пример
следующее:
// текст заполнения и удара
ctx.font = '60pt calibri';
ctx.linewidth = 3;
ctx.strokestyle = 'green';
ctx.stroketext («Привет, мир!», 20, 100);
ctx.fillstyle = 'red';
ctx.filltext («Привет, мир!», 20, 100);
Два: наполнение текстур и ход
HTML5 Canvas также поддерживает наполнение текстур. Загрузив текстурное изображение, а затем создавая рисунок щетки, API для создания шаблонов текстур является ctx.createPattern (ImageTexture, Repeat); Второй параметр поддерживает четыре значения, а именно повторный-x, repeat-y, повторить, без повторения, что означает, что текстура повторяется или не повторяется вдоль оси X, оси Y и XY-направления соответственно. Код для текстурных инвестиций и заполнения выглядит следующим образом:
var woodfill = ctx.createPattern (ImageTexture, "Repeat");
ctx.strokestyle = Woodfill;
ctx.stroketext («Привет, мир!», 20, 200);
// заполнить прямоугольник
ctx.fillstyle = Woodfill;
ctx.fillrect (60, 240, 260, 440);
Фактура изображение:
Три: операционный эффект
Код:
<! Doctype html>
<html>
<голова>
<meta http-equiv = "x-ua-совместимый" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<TILE> Canvas Fill and Throk Text Demo </title>
<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.»);
возвращаться;
}
// Получить 2D контекста холста и нарисовать прямоугольник
ctx = canvas.getContext ("2d");
ctx.fillstyle = "черный";
ctx.fillrect (0, 0, canvas.width, canvas.height);
// текст заполнения и удара
ctx.font = '60pt calibri';
ctx.linewidth = 3;
ctx.strokestyle = 'green';
ctx.stroketext («Привет, мир!», 20, 100);
ctx.fillstyle = 'red';
ctx.filltext («Привет, мир!», 20, 100);
// заполнить и ходить по рисунку
ImageTexture = document.CreateElement ('img');
ImageTexture.src = "../pattern.png";
ImageTexture.onload = loaded ();
}
функция загружена () {
// задержка с загруженным изображением
SetTimeout (TextureFill, 1000/30);
}
функция TextureFill () {
// var woodfill = ctx.createPattern (ImageTexture, "repeat-x");
// var woodfill = ctx.createPattern (ImageTexture, "repeat-y");
// var woodfill = ctx.createPattern (ImageTexture, "no-Repeat");
var woodfill = ctx.createPattern (ImageTexture, "Repeat");
ctx.strokestyle = Woodfill;
ctx.stroketext («Привет, мир!», 20, 200);
// заполнить прямоугольник
ctx.fillstyle = Woodfill;
ctx.fillrect (60, 240, 260, 440);
}
</script>
</head>
<тело>
<H1> HTML5 Canvas Text Demo - Mroomy Fish </H1>
<pre> заполнить и ходить </pre>
<div>
<Canvas> </canvas>
</div>
</body>
</html>