html5 canvas background.src,html - HTML5 generate canvas background image - Stack Overflow

不念不忘少年蓝@ 2022-10-12 04:07 145阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas 元素本身是没有

雨点打透心脏的1/2处/ 2023年07月12日 14:21/ 0 赞/ 25 阅读

相关 html5 -- Canvas

Canvas绘制简单图形一、绘制文字　　fillText(text, x, y\[, maxWidth\]) -- 填充方式　　strokeText(tex

我会带着你远行/ 2023年06月05日 05:44/ 0 赞/ 25 阅读

相关 HTML5 Canvas

Canvas画布描述获取方式注意点画布API 上下文API 颜色、样式和阴影线条样式

落日映苍穹つ/ 2023年01月10日 13:13/ 0 赞/ 176 阅读

相关 html5 canvas background.src,html - HTML5 generate canvas background image - Stack Overflow

CSS \wrapper canvas \{ position: relative; \} \wrapper canvas \{ border: 1px solid

不念不忘少年蓝@/ 2022年10月12日 04:07/ 0 赞/ 146 阅读

相关 html5 scrolling,javascript - Horizontal Scrolling on Canvas. HTML5 - Stack Overflow

Here's a pretty basic implementation: http://jsfiddle.net/CQPeU/ var can = document.get

电玩女神/ 2022年10月09日 05:57/ 0 赞/ 23 阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 278 阅读

相关 html5canvas网格制作,HTML5 Canvas网格变换

JavaScript 语言： JaveScriptBabelCoffeeScript 确定 (function() \{ var TriangleGrid, anim

╰+攻爆jí腚メ/ 2022年10月06日 13:50/ 0 赞/ 245 阅读

相关 HTML5 canvas

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2022年07月19日 11:48/ 0 赞/ 283 阅读

相关 HTML5Canvas

Canvas -> 做游戏：白鹭引擎、trees... 动画图表、频谱画图 HTML5 不只是单纯HTML 本身是一个标签 <canvas></canva

素颜马尾好姑娘i/ 2022年06月10日 05:19/ 0 赞/ 317 阅读

相关【HTML5】——Canvas

Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形）用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中

曾经终败给现在/ 2022年06月07日 03:44/ 0 赞/ 383 阅读