html5 canvas background.src,html - HTML5 generate canvas background image - Stack Overflow
CSS
#wrapper canvas {
position: relative;
}
#wrapper canvas {
border: 1px solid red;
position: absolute;
background-color: transparent;
}
HTML
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);
You can add as many layers as you want. Just add another;
.. where # is the new number of your layer (keep them in the correct order to get the correct results tho. You could even go as far with JavaScript as just start with an empty #wrapper and just fill it dynamically with canvas-incremented ID’s and then binding the full drawing procedure to it. Giving you super clean code while maintaining control over the content.
Play around with the coordinates and the size of the radials and it’ll fit soon enough like you want it. I’ll leave the rest of the creativity to you ;)
雨点打透心脏的1/2处
我会带着你远行
不念不忘少年蓝@
╰+攻爆jí腚メ
还没有评论，来说两句吧...