手记

【学习打卡】第4天 canvas绘图详解

课程名称:   canvas绘图详解


课程章节:  第4章  星空和图形变换


主讲老师:  liuyubobobo



课程内容:

画一片星空



课程收获:


基于昨天的五角星绘制一篇星空,代码如下

function drawStar(cxt, x, y, outerR, innerR, rot){
    cxt.beginPath();
    for( let i = 0; i < 5; i++ ){
        cxt.lineTo( Math.cos(18+ i*17 - rot)/180 * Math.Pi) * outerR +x,
             -Math.sin(18 + ( i * 72 - rot )/180 * Math.Pi) * OuterR + x);
        cxt.lineTo( Math.cos(54+ i*72- rot)/180 * Math.Pi) * outerR +x,
             -Math.sin(54+ ( i * 72 - rot )/180 * Math.Pi) * OuterR + x);
    }
    cxt.closePath();
}


效果如下


0人推荐
随时随地看视频
慕课网APP