Question

我需要编写或查找将生成jpg线渐变的应用程序，如下所示。 line gradient

这个应用程序可能基于HTML5或CSS3，它已经有线性渐变生成命令，并且会让用户选择线宽，线长，颜色和颜色位置，然后生成一个jpg，它可以是保存到目录。该应用程序可以是在线或独立的。

有没有人知道这样的应用程序，或者有一些好的想法来写一个？ jQuery中的东西会很棒！

由于

Answer 1

这是画布上的渐变笔画，可以保存为图像。

enter image description here

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // create a linear gradient
    var g=ctx.createLinearGradient(0,50,canvas.width,50);
    g.addColorStop(0,"brown");
    g.addColorStop(.33,"orange");
    g.addColorStop(.66,"orange");
    g.addColorStop(1.00,"brown");

    // stroke a gradient line on a black background
    ctx.fillStyle="black";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.moveTo(0,50);
    ctx.lineTo(canvas.width,50);
    ctx.strokeStyle=g;
    ctx.stroke();

    // let the user right-click save an image of the canvas
    $("#save").click(function(){
        var html="<p>Right-click on image below and Save-Picture-As</p>";
        html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";  // or canvas.toDataURL("image/jpeg")
        var tab=window.open();
        tab.document.write(html);
    });

}); // end $(function(){});
</script>

</head>

<body>
    <button id="save">save</button><br>
    <canvas id="canvas" width=350 height=100></canvas>
</body>
</html>

需要一个简单的线梯度发生器

1 个答案: