为什么设置字体没效果，楷书不行么

来源：7-7 编程练习

qq_陌_45

2018-06-13 21:07:48

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        canvas{background-color:#000;opacity:0.7}
    </style>
</head>
<body>
    <canvas id="canvas" width="1200px" height="1000px">
        您的浏览器不支持canvas
    </canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        // 在此处补充代码
        //通用阴影的统一设置
        context.shadowOffsetX = 5;
        context.shadowOffsetY = 10;
        context.shadowBlur = 10;

        //月亮
        context.save();
        context.fillStyle = '#e9f435';
        context.shadowColor = 'rgba(236,253,77,.5)';
        context.arc(100,100,50,0,2*Math.PI);
        context.fill();
        context.restore();

        //贝塞尔曲线
        context.save();

        context.beginPath();
        context.shadowColor = 'rgba(90,94,155,.5)';
        context.lineWidth = 5;
        context.strokeStyle = 'rgb(90,94,155)';
        context.translate(0,1000);
        //1
        context.moveTo(0,0);
        context.quadraticCurveTo(100,-600,300,0);
        context.stroke();
        //2
        context.moveTo(280,0);
        context.quadraticCurveTo(200,-500,500,0);
        context.stroke();
        //3
        context.moveTo(500,0);
        context.quadraticCurveTo(600,-700,700,0);
        context.stroke();
        //4
        context.moveTo(680,0);
        context.quadraticCurveTo(1000,-600,1200,0);
        context.stroke();

        context.restore();


        //文字
        var str = '山高月小';
        context.fillStyle = '#fff';
        context.shadowColor = '#fff';
        context.font = 'bold 50px 楷书';
        context.fillText(str,800,200);

    </script>
</body>
</html>

写回答

1回答