Html5 Canvas Javascript libraries?
Html5 Canvas Javascript libraries?
我想知道是否有任何javascript库可以帮助渲染图形。我在谷歌上搜索了一下,没有找到任何工具。我想在画布上画高斯曲线。
我已经使用并推荐了KineticJS库。它得到了积极的维护和定期更新。
我花了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];
}
有一些html5画布javascript库。其中一个比较完整的是paper.js
以下是Raphael、Paper和Processing javascript库在粉碎杂志方面的一个很好的比较
Paper.js非常适合HTML5画布。如前所述,您应该避免使用基于SVG或VML的库,因为大多数库都无法在Android设备上运行。
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在JavaScript中将字符串转换为函数引用
- 模糊事件的Javascript测试
- Javascript更改图标
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何使用WCF服务和javascript表单post上传.doc文件
- Javascript assertion libraries - chai vs check-types
- JavaScript Sanitization Libraries
- Html5 Canvas Javascript libraries?
- Javascript cryptography libraries
- Grails and css / javascript libraries
- Javascript class libraries "mimic"
- Javascript 2d plotting libraries
- Gzip/TAR libraries for Javascript
- WebStorm Javascript External Libraries - Node.js
- Libraries vs Pure Javascript