Среда программирования:
HTML 5 + JavaScript
raphael.js - это JavaScript библиотека для работы с векторной графикой в браузере, которая легка в использовании. С её помощью можно создавать свои собственные диаграммы, рисунки, работать с растровыми изображениями. С raphael.js это можно сделать легко и просто. Скачать raphael.js.
При использовании библиотеки ее желательно скопировать в папку с файлом html, так как библиотеки проще вызывать именно из папки вместе с проектом.
Для подключения нужно ввести строку
<html><script type="text/javascript" src="raphael.js"> <script type="text/javascript">
Создаём файл в формате html:
<html>
<head>
<title>Библиотека Raphael</title>
</style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
window.onload = function() {
var ph = document.getElementById("placeholder");
var paper = Raphael(10, 50, 5000, 5000);
}
</script>
</head>
<body>
<div id="placeholder"></div>
</body>
</html>Функция Raphael создаёт холст, на котором мы будем рисовать. Достаточно указать координаты одного угла и координаты второго. Рисуем фигуры
Создадим прямоугольник при помощи метода rect
var c = paper.rect(200, 120, 600, 400);
Для закраски прямоугольника используем attr:
c.attr({
fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
});Код результата:
<html>
<head>
<title>Библиотека Raphael</title>
</style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
window.onload = function() {
var ph = document.getElementById("placeholder");
var paper = Raphael(10, 50, 5000, 5000);
var c = paper.rect(200, 120, 600, 400);
c.attr({
fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
});
}
</script>
</head>
<body>
<div id="placeholder"></div>
</body>
</html>Результат:
Повернём прямоугольник при помощи метода rotate.
c.rotate(45);
Код с применением метода:
<html>
<head>
<title>Библиотека Raphael</title>
</style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
window.onload = function() {
var ph = document.getElementById("placeholder");
var paper = Raphael(10, 50, 5000, 5000);
var c = paper.rect(200, 120, 600, 400);
c.attr({
fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
});
}
</script>
</head>
<body>
<div id="placeholder"></div>
</body>
</html>
Метод ellipse отображает эллипс.
var c = paper.ellipse(100, 100, 30, 40);
Пример:
<html>
<head>
<title>Библиотека Raphael</title>
</style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
window.onload = function() {
var ph = document.getElementById("placeholder");
var paper = Raphael(10, 50, 5000, 5000);
var c = paper.ellipse(790, 400, 400, 200);
c.attr({
fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
});
}
</script>
</head>
<body>
<div id="placeholder"></div>
</body>
</html>
Пример повёрнутого эллипса:
<html>
<head>
<title>Библиотека Raphael</title>
</style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
window.onload = function() {
var ph = document.getElementById("placeholder");
var paper = Raphael(10, 50, 5000, 5000);
var c = paper.ellipse(790, 400, 400, 200);
c.attr({
fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
});
}
</script>
</head>
<body>
<div id="placeholder"></div>
</body>
</html>
Можно также сдвинуть эллипс:
c.translate(x, y);
<html>
<head>
<title>Библиотека Raphael</title>
</style>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
window.onload = function() {
var ph = document.getElementById("placeholder");
var paper = Raphael(10, 50, 5000, 5000);
var c = paper.ellipse(790, 400, 400, 200);
c.attr({
fill: "45-#000-#ccc:20-#000:50-#ccc:80-#000"
});
c.rotate(45);
c.translate(100, 100);
}
</script>
</head>
<body>
<div id="placeholder"></div>
</body>
</html>И изменить размер
c.scale(1.5, 2.5);
увеличивает в 1.5 раза в длину и в 2.5 раза в ширину.
Можно вставить картинку
var c = paper.image("apple.png", 10, 10, 100, 100);
Вывод:
Здесь описаны только основные возможности библиотеки Raphael. На самом деле их гораздо больше.
Комментарии
В примере с c.rotate(45); его нет в коде )
Хорошоб чтобы с картинкой пример был, ка ееё вращать и тп
А есть ли чтолибо для работы в 3D?