如何用canvas绘制星空,月亮,大地,增加文字--百分百源码网

如何用canvas绘制星空,月亮,大地,增加文字-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来如何用canvas绘制星空,月亮,大地,增加文字，用canvas绘制星空,月亮,大地,增加文字注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来如何用canvas绘制星空,月亮,大地,增加文字，用canvas绘制星空,月亮,大地,增加文字注意事项是什么，下面就是实战案例，一起来看一下。

先上终究结果图：

终究实现结果

依据盘算，我们顺次得出10个顶点值，并画出一个正的五角星，代码如下所示：

function setPath(cxt){
    cxt.beginPath();    for (var i = 0; i < 5; i++) {
        cxt.lineTo(            Math.cos((18 + i * 72 ) / 180 * Math.PI) * 10 ,
            -Math.sin((18 + i * 72 ) / 180 * Math.PI) * 10
        );
        cxt.lineTo(            Math.cos((54 + i * 72) / 180 * Math.PI) * 5 ,
            -Math.sin((54 + i * 72 ) / 180 * Math.PI) * 5
        );
    }
    cxt.closePath();
}

画出了一个五角星后，我们应当思索一下这个五角星的扭转及放大缩小变化，运用canvas的rotate办法进行扭转变化，运用scale进行缩放变化，概括代码如下所示：

function drawStar(cxt, R, x, y, rot) {
    cxt.save();
    cxt.translate(x,y);
    cxt.rotate(rot/180*Math.PI);
    cxt.scale(R,R);
    setPath(cxt)
    cxt.fillStyle = "#fb3";
    cxt.fill();
    cxt.restore();
}

至此，我们就可以反复运用该办法，借用随机值，画出一片星空：

for (var i = 0; i < 400; i++) {        
            var r = Math.random();
            var x = Math.random() * canvas.width;           
            var y = Math.random() * canvas.height*0.6;        
            var rot = Math.random() * 360;
        drawStar(context, r, x, y, rot);
    }

下来，让我们为这片星空调以天空的色彩。

 var linearGard=context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);
    linearGard.addColorStop(1.0,"black");
    linearGard.addColorStop(0.0,"#148EFB");
    context.fillStyle = linearGard;
    context.fillRect(0, 0, canvas.width, canvas.height);

至此，我们的一片星空，就画完了。
2.一轮弯月
在上面一片星空的根基上，我们添加一轮弯月，结果图如下所示：

终究代码如下所示，rot为扭转角度，fillColor的添补色。

function fillMoon(cxt,x1,y1,x2,y2,r,/*option*/rot,/*option*/fillColor){
cxt.save();
    cxt.beginPath();
    cxt.rotate(rot/180*Math.PI);    // 新建开端点
    cxt.arc(x1,y1,r,0.5*Math.PI,1.5*Math.PI,true);
    cxt.moveTo(x1,y1-r);
    cxt.arcTo(x2,y2,x1,y1+r,dis(r,x2-x1)); // 新建弧
    cxt.fillStyle=fillColor||"#fb3";
    cxt.fill();
cxt.restore();
}

3.大地

在以上根基上，我们添加了一片大地，结果图如下所示：

代码如下：

function drawLand(cxt){
    cxt.save();
    cxt.beginPath();
    cxt.moveTo(0,600);
    cxt.bezierCurveTo(540,400,660,800,1430,600);
    cxt.lineTo(1430,800);
    cxt.lineTo(0,800);
    cxt.closePath();    var landStyle=cxt.createLinearGradient(0,800,0,0);
    landStyle.addColorStop(0,"#030");
    landStyle.addColorStop(1,"#580");
    cxt.fillStyle=landStyle;
    cxt.fill();
    cxt.restore();
}

4.文字

到了最后一步，也就是最简略的一步了。
设定文字的大小，色彩，运用fillText进行文字绘制即可。

   CXT.save();
    CXT.font="bold 20px Georgia";
    CXT.fillStyle="#fff";
    CXT.fillText("Canvas文字绘制",200,650);
    CXT.fillText("——海上月_天上月",500,700);
    CXT.restore();
}```

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相干文章！

举荐浏览：

class="no-js"有哪些意思

Git的常用短语

nodejs的npm常用下令汇合

如何用canvas来绘制彩色七巧板

以上就是如何用canvas绘制星空,月亮,大地,增加文字的细致内容，更多请关注百分百源码网其它相干文章！

打赏