Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
С помощью свойства 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>
Создание теней
< 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>
В этом примере надо обратить внимание на два момента:
Кстати, как я уже писал в начале, Canvas может легко сочетаться с обычными изображениями и даже видео, в частности, это означает, что на Canvas можно проектировать картинку или текущий кадр видео-потока. В сочетании с доступом к отдельным пикселям, это позволяет делать анализ изображений непосредственно на клиенте с помощью JavaScript. Гипно-спираль Наконец, давайте посмотрим на еще несколько важных аспектов работы с Canvas — трансформации контекста отрисовки. И для этого мы нарисуем гипнотическую спираль. < html> < body> < canvas id=" myCanvas" width=" 200" height=" 200" /> < script type='text/javascript'> // Отрисовка спирали |
Последнее изменение этой страницы: 2017-03-14; Просмотров: 390; Нарушение авторского права страницы