Html5 Canvas Javascript libraries?

Question

그래픽을 렌더링하는 데 도움이되는 자바 스크립트 라이브러리가 있는지 알고 싶습니다. Google을 검색했지만 도구를 찾지 못했습니다. 캔버스에 Gauss 커브를 만들고 싶습니다.

Answer 1

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]; 
} 

Answer 2

몇 가지 html5 캔버스 자바 스크립트 라이브러리가 있습니다.

Answer 3

Here 내가 사용하고 KineticJS library 추천 한 자바 스크립트 라이브러리

Answer 4

라파엘, 종이 및 처리 사이에 잡지 스매싱에서 좋은 비교가 paper.js 더 완전한 사람 중 하나입니다. 적극적으로 유지 관리되고 정기적으로 업데이트됩니다.

Answer 5

Paper.js는 HTML5 캔버스에 매우 적합합니다. 이전에 언급했듯이 SVG 또는 VML 기반의 라이브러리는 안드로이드 장치에서 작동하지 않기 때문에 피해야합니다.