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

<强> HTML

<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，只需从空{{1}开始然后用#wrapper动态填充它 - 增加ID，然后将完整的绘图程序绑定到它。给你超干净的代码，同时保持对内容的控制。

使用坐标和径向尺寸进行游戏，它很快就会像你想要的那样适合。我会把剩下的创造力留给你;）

Answer 2

你也可以尝试用旧学校的方法： - ）

使用算法生成颜色数组

例如粉红色的成绩：

var colors = [];

for(var x=0;x<width;x++)
    for(var y=0;y<height;y++)
    {   var red = 0x6b+(x>>2)+(y>>2); if(red>0xff) red = 0xff;
        colors[y*width+x] = (red<<16)|(0x2b<<8)|0xc6;
    }

并使用一些代码提取每种颜色r，g，b以用它填充画布

while(i < size){
    color = colors[i]; // get color

    // extract r,g,b ...
    var r = (color>>16)&255;
    var g = (color>>8)&255;
    var b = color&255;

    // fill buffer with each color part
    buffer[n++] = r;
    buffer[n++] = g;
    buffer[n++] = b;
    buffer[n++] = 255; // alpha to max
    i++;
}

小提琴：http://jsfiddle.net/r043v/FTuPC/9/