请问一下这里的字体怎么设置呀？我设置了但是没有效果？

来源：7-7 编程练习

gaogao_

2017-11-17 23:25:33

<!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.save();
        context.shadowOffsetX=10;
        context.shadowOffsetY=10;
        context.shadowBlur=20;
        context.shadowColor="rgba(255,215,0,0.7)"
        context.arc(150,150,50,0,Math.PI*2,true);
        context.fillStyle="rgb(255,215,0)";
        context.fill();
        context.restore();

        context.save();
        context.shadowOffsetX=2;
        context.shadowOffsetY=10;
        context.shadowBlur=10;
        context.shadowColor="rgba(255,255,255,0.7";
        context.font="40px STXingkai";
        context.fillStyle="rgba(255,255,255,1";
        context.fillText("山高月小",700,300);
        context.restore();

        context.save()
        context.lineWidth = 10;
        context.beginPath();
        context.translate(200,250)
        context.moveTo(11, 466);
        context.quadraticCurveTo(55, 61, 114, 464);
        context.translate(80,0);
        context.moveTo(15, 466);
        context.quadraticCurveTo(27, 210, 114, 464);
        context.translate(90,0);
        context.moveTo(15, 466);
        context.quadraticCurveTo(22, 94, 129, 467);
        context.translate(90,0);
        context.moveTo(15, 466);
        context.quadraticCurveTo(196, 69, 269, 468);
        context.shadowOffsetX=10;
        context.shadowOffsetY=10;
        context.shadowBlur=20;
        context.shadowColor="rgba(45,85,231,0.8";
        context.strokeStyle="rgba(45,85,231,0.9"
        context.stroke();
    </script>
</body>
</html>

写回答

1回答