6

我有这张我在 photoshop 中制作的图像，我想要一种使用 HTML5 Canvas 重新创建它的方法，以便 javascript 创建相同的图像（或类似的图像）。它会使页面加载更快，因为没有图像必须也可以下载。

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

有人知道如何创建这样的东西吗？

在此处输入图像描述

4

2 回答 2

3

从这里开始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，只是从一个空开始，然后#wrapper用 -incremented ID 动态填充它canvas，然后绑定完整的绘图过程。为您提供超级干净的代码，同时保持对内容的控制。

玩弄坐标和径向线的大小，它很快就会像你想要的那样适合。我会把剩下的创意留给你；）

于 2013-03-31T13:58:07.580 回答
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/

于 2013-03-31T14:20:00.667 回答