首页 > 求助,这张背景图能否用css画出来啊?

求助,这张背景图能否用css画出来啊?

如果能的华,怎么画啊,跪求了


css径向渐变,你百度一下就知道了。


这个用css做得有多麻烦,一般前端没人会用css写,大多采用gif动态图


用canvas大致画了一个。有点差异,具体的效果可以自己改

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var clg = ctx.createLinearGradient(0, 0, 0, -640);
ctx.fillStyle = "#fc3";
ctx.fillRect(0, 0, 719, 1280);
ctx.strokeStyle = "transparent";
ctx.fillStyle = clg;
draw(23);
        
ctx.translate(360, 640);
ctx.fillStyle = "#fc3";
ctx.beginPath();
ctx.arc(0, 0, 25, 0, 2 * Math.PI);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.translate(-360, -640);
        
function draw(n) {
    for (var i = 0; i < n; i ++) {
        ctx.translate(360, 640);
        ctx.rotate(2 * Math.PI / n * i);
        clg.addColorStop(0.6, "#ff6");
        clg.addColorStop(0.9, "#fc3");
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-50, -640);
        ctx.lineTo(50, -640);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        ctx.rotate(-2 * Math.PI / n * i);
        ctx.translate(-360, -640);
    };    
};

用canvas加js绘画,不过有兼容问题


这个还是用图片代替省事吧~?如果你说需要动态的效果,那么Photoshop、Gif Maker等也能弄gif动态图啊。个人觉得许多编程语言中提供的画图函数库实现的东西都可以用外部的工具实现,没必要用语言去画那么复杂的一个图。

【热门文章】
【热门文章】