html5 绘制集合图形

浏览数：29 / 时间：2015年06月09日

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <h2>绘制矩形</h2>
    <canvas id="mo" width="400" height="280" style="border: 1px solid"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("mo");

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

        ctx.shadowBlur = 5.6;//设置阴影的模糊度
        ctx.shadowColor = "#111";//设置阴影的颜色
        ctx.fillStyle = "#f22";

        ctx.fillRect(30, 20, 120, 60);


        ctx.fillStyle = "#ff2";

        ctx.fillRect(80, 60, 120, 60);


        ctx.fillStyle = "#333";
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#6f3";
        ctx.fillRect(20, 130, 120, 60);

    </script>
    <h2>绘制文字</h2>
    <canvas id="mc" width="800" height="280" style="border: 1px solid"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("mc");

        var ctx = canvas.getContext("2d");
        ctx.shadowBlur = 8.6;//设置阴影的模糊度
        ctx.shadowColor = "#555";//设置阴影的颜色

        ctx.fillStyle = "#f22";
        ctx.font = "italic 50px 隶书";
        ctx.textBaseline = ‘top‘;
        ctx.fillText("百代繁华一朝都，谁非过客。", 0, 0);


        ctx.fillStyle = "#f0f";
        ctx.font = "bold 45px 宋体";

        ctx.fillText("千秋明月吹角寒，花是主人。", 0, 50);
    </script>
    <h2>绘制圆形</h2>
    <canvas id="Canvas2" width="800" height="280" style="border: 1px solid"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("Canvas2");
        var ctx = canvas.getContext("2d");
        for (var i = 0; i < 10; i++) {
            ctx.beginPath();//开始定义路径
            ctx.arc(i * 25, i * 25, (i + 1) * 8, 0, Math.PI * 2, true);
            ctx.closePath();//关闭路径
            ctx.fillStyle = ‘rgba(255,0,255,‘ + (10 - i) * 0.1 + ‘)‘;
            ctx.fill();
        }

    </script>
    <h2>LintTo</h2>
    <canvas id="Canvas1" width="800" height="280" style="border: 1px solid" ></canvas>
    <script type="text/javascript">
        function createStar(context, n, dx, dy, size)
        {
            context.beginPath();
            var dig = Math.PI / n * 4;
            for (var i = 0; i < n; i++) {
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.lineTo(x * size + dx, y * size + dy);
            }
            context.closePath();
        }
        var canvans = document.getElementById("Canvas1");
        var ctx = canvans.getContext(‘2d‘);
        createStar(ctx, 3, 60, 60, 50);
        ctx.fillStyle = "#556";
        ctx.fill();
        createStar(ctx, 5, 160, 60, 50);
        ctx.fillStyle = "#156";
        ctx.fill();
        createStar(ctx,7, 260, 60, 50);
        ctx.fillStyle = "#192";
        ctx.fill();
        createStar(ctx, 9,360, 60, 50);
        ctx.fillStyle = "#345";
        ctx.fill();
    </script>
</body>
</html>