Question

我需要类似下面链接中显示的图片，我不知道该怎么做，最重要的想法是日历是动态生成的......这个日历会显示在网页上。< / p>

Example image

Answer 1

有趣的项目！

您可以使用画布变换围绕中心点辐射日历。

演示：http://jsfiddle.net/m1erickson/Q7S9L/

enter image description here

我们的想法是将您日历的一行垂直绘制到一列中：

enter image description here

然后使用画布变换旋转该列。

变换包括context.translate（移动）和context.rotate（旋转）

// save the context state

ctx.save();

// translate to the centerpoint around which we will rotate the column

ctx.translate(cx,cy);

// rotate the canvas (which will rotate the column)

ctx.rotate( desiredRadianAngle );

// now draw the column and it will be rotated to the desired angle

以下是示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var year=2014;
    var PI2=Math.PI*2;
    var cx=375;
    var cy=375;
    var radialIncrement=15;
    var rotationIncrement=-Math.PI/31;

    var months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var days=[31,28,31,30,31,30,31,31,30,31,30,31];
    var dayNames=['Su','M','Tu','W','Th','F','Sa','Su','M','Tu','W','Th','F','Sa','Su','M','Tu','W','Th','F','Sa','Su','M','Tu','W','Th','F','Sa','Su','M','Tu','W','Th','F','Sa','Su','M','Tu','W','Th','F','Sa'];

    var monthsFirstWeekday=[]
    for(var m=1;m<=12;m++){
        monthsFirstWeekday.push(new Date(m+"/01/"+year).getDay());
    }


    for(var d=0;d<=38;d++){
        ctx.save();
        ctx.translate(cx,cy);
        ctx.rotate(rotationIncrement*(31-d)+Math.PI/2);
        var x=-3;
        var y=-13*radialIncrement-150;
        ctx.font="12px verdana";
        ctx.fillStyle="blue";
        ctx.fillText(dayNames[d],x,y);
        ctx.restore();
    }

    for(var m=0;m<months.length;m++){
        ctx.save();
        ctx.translate(cx,cy+25);
        ctx.rotate(Math.PI*3/2);
        ctx.fillStyle="blue";
        ctx.fillText(months[m],0,-(months.length-m)*radialIncrement-150);
        ctx.restore();
    }

    for(var d=0;d<=38;d++){

        ctx.save();
        ctx.translate(cx,cy);
        ctx.rotate(rotationIncrement*(31-d)+Math.PI/2);

        for(var m=0;m<months.length;m++){

            var x=0;
            var y=-(months.length-m)*radialIncrement-150;

            var dd=d-monthsFirstWeekday[m]+1;

            if(dd>0 && dd<=days[m]){
                ctx.fillStyle="black";
                ctx.fillText(dd,x,y);
            }else{
                ctx.beginPath();
                ctx.arc(x+3,y,1,0,Math.PI*2);
                ctx.closePath();
                ctx.fillStyle="red";
                ctx.fill();
            }

        }
        ctx.restore();
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=775 height=650></canvas>
</body>
</html>

倾斜日历与html5和css3和/或任何其他想法

1 个答案: