Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология
Образование Политология Производство Психология Стандартизация Технологии


С помощью свойства lineJoin можно сглаживать стыки двух линий.



< html>

< body>

< canvas id='draw' width='240' height='200' style='border: 1px solid; padding: 20px; '> < /canvas>

< script type='text/javascript'>

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

//Сгладим стыки линий

X.beginPath()

x.moveTo(10, 10);

x.lineWidth=15;

x.lineJoin='round';

x.lineTo(50, 50);

x.lineTo(100, 10);

x.lineTo(170, 80);

x.lineTo(210, 40);

x.stroke();

//Нарисуем стыки не сглаженными (значение по умолчанию)

X.beginPath()

x.moveTo(10, 100);

x.lineWidth=15;

x.lineJoin='miter';

x.lineTo(50, 140);

x.lineTo(100, 100);

x.lineTo(170, 170);

x.lineTo(210, 130);

x.stroke();

< /script>

< /body>

< /html>

Градиентная заливка

С помощью метода createLinearGradient(x1, y1, x2, y2) можно создать линейный градиент. Параметры x1 и y1 устанавливают координаты начальной, а x2 и y2 конечной точки градиента.

После того, как градиент создан необходимо указать цвета перехода. Это можно сделать с помощью метода addColorStop(точка, цвет).

Например, если нужно создать градиент, который плавно изменяет цвет с черного на белый необходимо установить черный цвет в точке 0 (так условно начальная точка градиента) и белый цвет в точке 1 (конечная точка градиента).

< html>

< body>

< canvas id='draw' width='240' height='200' style='border: 1px solid; '> < /canvas>

< script>

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

/* Создаем градиент */

var grad = x.createLinearGradient(0, 0, 0, 150); //начало и конец

/* Добавляем точки цветового перехода */

grad.addColorStop(0.0, 'black');

grad.addColorStop(1.0, 'white');

/* Устанавливаем получившийся градиент как свойство заливки */

x.fillStyle=grad;

/* Рисуем фигиру, к которой будет применен созданный градиент */

x.fillRect(20, 20, 200, 200);

< /script>

< /body>

< /html>

Можно создавать более сложные градиенты, которые изменяют цвет в нескольких точках.

< html>

< body>

< canvas id='draw' width='240' height='200' style='border: 1px solid; '> < /canvas>

< script>

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

/* Создаем градиент */

var grad = x.createLinearGradient(50, 50, 150, 150);

/* Добавляем точки цветового перехода */

Grad.addColorStop(0.0, '#d2006b'); //Розовый цвет в начале

Grad.addColorStop(0.5, '#00a779'); //Бирюзовый цвет в середине

Grad.addColorStop(1.0, '#ffe800'); //Желтый цвет в конце

/* Устанавливаем получившийся градиент как свойство заливки */

x.fillStyle=grad;

/* Рисуем фигиру, к которой будет применен созданный градиент */

x.fillRect(20, 20, 190, 150);

< /script>

< /body>

< /html>

Создание теней

Метод Описание
shadowOffsetX Смещение тени от объекта по горизонтали (может принимать отрицательные значения).
shadowOffsetY Смещение тени от объекта по вертикали (может принимать отрицательные значения).
shadowBlur Величина размытия тени.
shadowColor Цвет тени (по умолчанию черный).

< html>

< body>

< canvas id='draw' width='300' height='200' style='border: 1px solid'> < /canvas>

< script type='text/javascript'>

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

x.shadowOffsetX=3;

x.shadowOffsetY=3;

x.shadowBlur=8;

x.shadowColor='black';

x.fillStyle='#ffaa00';

x.fillRect(50, 40, 55, 55);

< /script>

< /body>

< /html>

Текст

Метод fillText(" текст", x, y) позволяет отображать в элементе canvas произвольный текст.

< html>

< body>

< canvas id='draw' width='240' height='180' style='border: 1px solid; '> < /canvas>

< script type='text/javascript'>

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

x.fillText(" Теперь можно отображать", 15, 40);

x.fillText(" произвольный текст", 100, 70);

x.fillText(" в элементе canvas.", 60, 120);

< /script>

< /body>

< /html>

Текст отображаемый в canvas может быть оформлен с помощью свойства font.

< html>

< body>

< canvas id=" draw" width=" 300" height=" 160" style=" border: 1px solid; " > < /canvas>

< script type=" text/javascript" >

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

x.font='15px Verdana';

x.fillStyle='#60016d';

x.fillText(" Теперь можно отображать", 10, 40);

x.font='25px Arial';

x.fillStyle='#007439';

x.fillText(" произвольный текст", 10, 80);

x.fillStyle='#a67800';

x.font='20px Comic Sans MS';

x.fillText(" в элементе canvas.", 50, 120);

< /script>

< /body>

< /html>

Примеры

Дорожный знак

< html>

< body>

< canvas id=" myCanvas" width=" 200" height=" 200" />

< script type='text/javascript'>

var ctx = document.getElementById(" myCanvas" ).getContext(" 2d" );

var width = ctx.canvas.width;

var height = ctx.canvas.height;

// Радиус и центр круга

var radius = 0.4 * width;

var cx = width / 2;

var cy = height / 2;

// Делаем путь для круга от 0 до 2PI

ctx.beginPath();

ctx.arc(cx, cy, radius, 0, Math.PI * 2);

ctx.closePath();

// Устанавливаем отрисовку с тенью

ctx.shadowBlur = 10;

ctx.shadowColor = " black";

// Устанавливаем ширину и цвет линии и отрисовываем

ctx.lineWidth = 25;

ctx.strokeStyle = " #f00";

ctx.stroke();

// Убираем тень

ctx.shadowColor = " transparent";

// Создаем радиальный градиент для заливки

var gradient = ctx.createRadialGradient(cx, cx, 0, cx, cy, radius);

gradient.addColorStop(0, " #ddd" );

gradient.addColorStop(1, " #eee" );

// Устанавливаем градиент и делаем заливку

ctx.fillStyle = gradient;

ctx.fill();

// Устанавливаем стили текста и центрирование

ctx.textAlign = " center";

ctx.textBaseline = " middle";

ctx.font = " bold 55px 'Segoe UI', 'Tahoma', sans-serif";

ctx.fillStyle = " #333";

// Выводим надпись

ctx.fillText(" STOP", cx, cy);

< /script>

< /body>

< /html>

Папоротник

Переходим к классике основ изучения компьютерной графики! Давайте посмотрим, как нарисовать фрактальный лист папоротника с помощью Canvas.

Для описания папоротника нам понадобится матрица афинных преобразований, каждое из которых будет применяться с некоторой вероятностью

< html>

< body>

< canvas id=" myCanvas" width=" 200" height=" 200" />

< script type='text/javascript'>

var ctx = document.getElementById(" myCanvas" ).getContext(" 2d" );

// Афинные преобразования для каждой из вероятностей

var barnsleyMatrix = [[ 0, 0, 0, 0.16, 0, 0],

[ 0.85, 0.04, -0.04, 0.85, 0, 1.60],

[ 0.20, -0.26, 0.23, 0.22, 0, 1.60],

[-0.15, 0.28, 0.26, 0.24, 0, 0.44]];

// Суммы вероятностей (0.01, 0.85, 0.07, 0.07)

var probability = [0.01, 0.86, 0.93, 1.0];

// Контекст для работы

var ctx = document.getElementById(" myCanvas" ).getContext(" 2d" );

// Ширина и высота холста

var width = ctx.canvas.width;

var height = ctx.canvas.height;

// Пиксели для изображения

var pixels = ctx.createImageData(width, height);

var iterations = 50000;

var p, n;

var x = 0.0;

var y = 0.0;

var xn, yn, xp, yp, j;

// Итерационный процесс

for (var i = 0; i < iterations; i++) {

p = Math.random();

n = 0; while (p > probability[n]) n++;

// Новые координаты

xn = barnsleyMatrix[n][0] * x + barnsleyMatrix[n][1] * y + barnsleyMatrix[n][4];

yn = barnsleyMatrix[n][2] * x + barnsleyMatrix[n][3] * y + barnsleyMatrix[n][5];

x = xn;

y = yn;

// Переводим в экранные координаты

xp = width/2 + Math.floor( x * 20);

yp = height - Math.floor(y * 20);

// Находим место в одномерном массиве пикселей

j = (yp * width + xp) * 4;

// Устанавливаем значения для компонент RGBA

pixels.data[j + 0] = 0;

pixels.data[j + 1] = 180;

pixels.data[j + 2] = 0;

pixels.data[j + 3] = 255;

}

// Записываем итоговый массив пикселей

ctx.putImageData(pixels, 0, 0);

< /script>

< /body>

< /html>

 

 

В этом примере надо обратить внимание на два момента:

  1. Доступ к пикселя осуществляется не в прямом виде, а через выгружаемый и записываемый массив пикселей (окно), причем операции чтения и записи разнесены в разные функции и во времени. Опять-таки, API побуждает разработчиков сначала произвести необходимые изменения в пикселях и уже после этого массово внести изменения вместо того, чтобы отдельно читать и записывать каждый из пикселей.
  2. Массив, с которым идет работа, одномерный (хотя у объекта типа ImageData и определены ширина и высота), причем в нем последовательно хранятся не просто пиксели, а значения по каждому из каналов для каждого из пикселей. Другими словами, на каждый пиксель приходится четыре элемента массива (RGBA) со значениями от 0 до 255.

Кстати, как я уже писал в начале, Canvas может легко сочетаться с обычными изображениями и даже видео, в частности, это означает, что на Canvas можно проектировать картинку или текущий кадр видео-потока. В сочетании с доступом к отдельным пикселям, это позволяет делать анализ изображений непосредственно на клиенте с помощью JavaScript.

Гипно-спираль

Наконец, давайте посмотрим на еще несколько важных аспектов работы с Canvas — трансформации контекста отрисовки. И для этого мы нарисуем гипнотическую спираль.

< html>

< body>

< canvas id=" myCanvas" width=" 200" height=" 200" />

< script type='text/javascript'>

// Отрисовка спирали


Поделиться:



Последнее изменение этой страницы: 2017-03-14; Просмотров: 390; Нарушение авторского права страницы


lektsia.com 2007 - 2024 год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! (0.051 с.)
Главная | Случайная страница | Обратная связь