Я хотел бы знать, есть ли какие-либо библиотеки javascript, чтобы помочь в рендеринге графики. Я искал google и не нашел никаких инструментов. Я хочу сделать кривые Гаусса в холсте.Html5 Canvas Библиотеки Javascript?
ответ
Мне потребовалось 15 секунд, чтобы найти. Играйте с ним, пока не получите то, что вам нравится.
$(document).ready(drawGaussian);
var canvasContext;
var points;
var noise = 0;
function drawGaussian()
{
canvasContext = document.getElementById("gaussian-canvas").getContext("2d");
document.getElementById("gaussian-canvas").onclick = cycleNoise;
cycleNoise();
}
function cycleNoise()
{
canvasContext.clearRect(0, 0, 400, 400);
var m = Math.random() > .4
var amount = Math.round(Math.random() * 20000);
var size = Math.round(Math.random() * 3)+1;
document.getElementById("particles").innerHTML = amount;
document.getElementById("size").innerHTML = size;
switch(noise)
{
case 0:
drawGaussianField(amount, size, 200, 200, 400, 100, m);
document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Field";
break;
case 1:
drawGaussianCurves(amount, size, 200, 200, 400, 150, m);
document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Curves";
break;
case 2:
drawGaussianDiamond(amount, size, 200, 200, 400, 130, m);
document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Diamond";
break;
case 3:
drawGaussianOval(amount, size, 200, 200, 300, 300, m);
document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Circle";
break;
case 4:
drawGaussianBurst(amount, size, 200, 200, 120, 120, m);
document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Burst";
break;
}
noise++;
if(noise > 4) noise = 0;
}
function drawGaussianField(amount, thickness, x, y, width, height, monochromatic)
{
for(i = 0; i < amount; i++)
{
points = getGaussianPoints();
setColor(monochromatic);
canvasContext.fillRect(x + ((width*.5) * points[3]), y + ((height*.5) * points[2]), thickness, thickness);
}
}
function drawGaussianCurves(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
points = getGaussianPoints();
setColor(monochromatic);
canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[2]), thickness, thickness);
}
}
function drawGaussianDiamond(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
points = getGaussianPoints();
setColor(monochromatic);
canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[3]), thickness, thickness);
}
}
function drawGaussianOval(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
points = getGaussianPoints();
setColor(monochromatic);
canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[1]), thickness, thickness);
}
}
function drawGaussianBurst(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
points = getGaussianPoints();
setColor(monochromatic);
canvasContext.fillRect(x + ((width*.5) * points[2]), y + ((height*.5) * points[3]), thickness, thickness);
}
}
function setColor(val){
if(val)
{
canvasContext.fillStyle = '#ffffff';
}
else
{
canvasContext.fillStyle = "#"+Math.floor(Math.random()*16777215).toString(16);
}
}
function getGaussianPoints(){
var x1, x2, w, y1, y2;
do {
x1 = 2.0 * Math.random() - 1.0;
x2 = 2.0 * Math.random() - 1.0;
w = x1 * x1 + x2 * x2;
} while (w >= 1.0);
w = Math.sqrt((-2.0 * Math.log(w))/w);
y1 = x1 * w;
y2 = x2 * w;
return [x1, x2, y1, y2];
}
Спасибо! Где вы это нашли? Интернет - странное место! – Delarn
@ Delarn, вы привыкнете к нему через некоторое время;) –
Я знаю, что 10 лет я оставил веб-разработчику, и теперь, когда я получаю удовольствие от новых технологий, я это переусердствую. И найти хорошую информацию довольно сложно. Спасибо за вашу помощь. – Delarn
Существует несколько javascript-библиотек html5. Один из наиболее полных из них является paper.js
Спасибо, посмотрим! – Delarn
Я использовал и рекомендовать KineticJS library. Он активно поддерживается и регулярно обновляется.
Paper.js довольно хорошо подходит для холста HTML5. Как уже упоминалось ранее, вы должны избегать библиотек на основе SVG или VML, потому что большинство из них не будут работать на устройствах Android.
- 1. мощные библиотеки javascript canvas
- 2. Фоновое изображение javascript HTML5 canvas
- 3. HTML5 Canvas JavaScript Crosshair Grid
- 4. HTML5 Canvas, Text и JavaScript
- 5. JavaScript HTML5 Canvas не отображается
- 6. javascript variables - html5 canvas issue
- 7. javascript canvas html5 вопросы производительности
- 8. Использование Canvas fillText() - HTML5, JavaScript
- 9. Java в JavaScript/HTML5 Canvas
- 10. HTML5 canvas + javascript class = error
- 11. Библиотеки javascript HTML5
- 12. HTML5 Canvas Векторная графика?
- 13. HTML5 Canvas Ошибка
- 14. HTML5 Динамически создавать Canvas
- 15. html5 canvas как приложение
- 16. HTML5 Canvas Полный размер
- 17. HTML5 canvas: processingJS
- 18. HTML5 Canvas, GUI
- 19. Java Script html5 Canvas
- 20. html5 canvas javascript wait for user input
- 21. Поворота нарисованного круга ого Javascript HTML5 Canvas
- 22. JavaScript/HTML5 Canvas - Загрузка массива изображений
- 23. HTML5 Canvas javascript smudge brush tool
- 24. Почему этот Javascript/HTML5 Canvas не работает?
- 25. Javascript, HTML5 (canvas) progressbar с обновлением
- 26. Javascript HTML5 Canvas draw path issue
- 27. Ошибка утечки Javascript - Canvas HTML5 jQuery
- 28. HTML5 Canvas toDataURL() блокирует вызов JavaScript?
- 29. html5-canvas javascript draw line with slider
- 30. HTML5 Canvas Javascript, как сделать гладкой кисти
Я предсказываю, что это будет закрыто как дубликат или вопрос опроса менее чем за 20 минут. Какие инструменты вы нашли до сих пор? –
Единственное место, где стоит html5 canvas tutorials ... но нет «библиотек» – Delarn
https://www.google.com/search?q=canvas+libraries -> [результат первого поиска] (http://javascript.open-libraries.com/utilities/drawing/10-best-javascript-drawing-and-canvas-libraries/). –