HTML5生成画布背景图像

Question

我有这个我在photoshop中制作的图像,我想要一种方法来使用HTML5 Canvas重新创建它,这样javascript就可以创建相同的图像(或类似的)..它会使页面加载更快,因为没有图像必须也可以下载.

这是一个非常简单的形象.三种不同的颜色模糊或放置为渐变(我不知道该怎么做),然后从底部淡出的白色渐变到透明后可能是60px.我已经看到使用canvas元素实现了许多令人难以置信的事情,每次都是相同的图像,没有动画.此外,我希望它在窗口调整大小时自动缩放.

有谁知道如何创造这样的东西？

Answer 1

从这里开始http://jsfiddle.net/5pR46/1/：

CSS

#wrapper canvas {
    position: relative;
}

#wrapper canvas {
    border: 1px solid red;
    position: absolute;
    background-color: transparent;
}

超文本标记语言

<div id="wrapper">
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <canvas id="myCanvas2" width="578" height="200"></canvas>
</div>

JavaScript

function drawRadial(elemId, startColor, endColor, x0, y0, r0, x1, y1, r1) {
    var canvas = document.getElementById(elemId);
    var context = canvas.getContext('2d');

    context.rect(0, 0, canvas.width, canvas.height);

    // create radial gradient
    var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);
    grd.addColorStop(0, startColor);
    grd.addColorStop(1, endColor);

    context.fillStyle = grd;
    context.fill();

    delete canvas;
    delete context;
    delete grd;
}

drawRadial('myCanvas', 'rgba(248,173,133,1.0)', 'rgba(0,0,0,0.0)', 50, 25, 110, 300, 50, 400);
drawRadial('myCanvas2', 'rgba(213,215,155,1.0)', 'rgba(0,0,0,0.0)', 500, 150, 110, 500, 50, 600);

您可以根据需要添加任意数量的层。只需添加另一个即可；

<canvas id="myCanvas#" width="578" height="200"></canvas>

..#你的层的新编号在哪里（保持它们以正确的顺序以获得正确的结果）。你甚至可以使用 JavaScript，从一个空的开始，然后用递增的 ID#wrapper动态填充它，然后绑定canvas完整的绘图过程。为您提供超级干净的代码，同时保持对内容的控制。

调整径向的坐标和大小，它很快就会像您想要的那样适合。我会把剩下的创意留给你;)