在canvas里加了几个文字，想应用@font-face添加网上下载的字体，怎么没效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>translate、scale的使用</title>
<style type="text/css">
@font-face{
font-family: "myfont";
src:url("fonts/BetterTogetherScript.ttf") format('truetype');
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<canvas id="canvas" style = "display:block;margin:20px auto;border:1px dotted #911">
您的浏览器out啦，赶快更新至最新版本
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
// var lg = context.createLinearGradient(0,0,0,canvas.height);
// lg.addColorStop(0,"black");
// lg.addColorStop(1.0,"#035");
// context.fillStyle = lg;
var lg = context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width*0.5,canvas.height,canvas.height);
lg.addColorStop(0,"#049");
lg.addColorStop(1.0,"black");
context.fillStyle = lg;
context.fillRect(0,0,canvas.width,canvas.height);
window.onload = function(){
for(var i=0;i<100;i++){
var R = Math.random()*3+3;
var x = Math.random()*canvas.width;
var y = Math.random()*canvas.height*0.5;
var rot = Math.random()*360;
drawStar(context,x,y,R,rot);
}
drawMoon(context,3/2,600,200,60,30);
drawLand(context);
context.font = "40px myfont";
var lg = context.createLinearGradient(0,0,800,0);
lg.addColorStop(0,"red");
lg.addColorStop(0.25,"orange");
lg.addColorStop(0.5,"yellow");
lg.addColorStop(0.75,"green");
lg.addColorStop(1.0,"purple");
context.fillStyle = lg;
context.fillText("draw star by canvas",300,500);
}
function drawStar(ctx,x,y,R,rot){
ctx.save();
ctx.translate(x,y);
ctx.rotate(rot/180*Math.PI);
ctx.scale(R,R);
startPath(ctx);
// ctx.strokeStyle = "#aaa";
// ctx.lineJoin = "round";
// ctx.lineWidth = 2;
ctx.fillStyle = "yellow"
ctx.fill();
// ctx.stroke();
ctx.restore();
}
function startPath(ctx){
ctx.beginPath();
for(var i = 0;i<5;i++){
ctx.lineTo(Math.cos((18+72*i)/180*Math.PI),-Math.sin((18+72*i)/180*Math.PI));
ctx.lineTo(Math.cos((54+72*i)/180*Math.PI)*0.5,-Math.sin((54+72*i)/180*Math.PI)*0.5);
}
ctx.closePath();
}
/*绘制一轮弯月*/
function dis(x1,y1,x2,y2){
return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
}
function drawMoon(context,d,x,y,R,rot,fillColor){ /*画一轮弯月的通用函数*/
context.save();
context.translate(x,y);
context.rotate(rot/180*Math.PI);
context.scale(R,R);
pathMoon(context,d);
context.fillStyle = fillColor||"#fc6";
context.fill();
context.restore();
}
function pathMoon(context,d){
context.beginPath();
context.arc(0,0,1,1/2*Math.PI,3/2*Math.PI,true);
context.moveTo(0,-1);
context.arcTo(d,0,0,1,dis(0,-1,d,0)/d);
context.closePath();
}
/*绘制一片草地*/
function drawLand(context){
context.save();
context.beginPath();
context.moveTo(0,600);
context.bezierCurveTo(260,400,480,800,800,600);
context.lineTo(1200,800);
context.lineTo(0,800);
context.closePath();
var lg2 = context.createLinearGradient(0,800,0,0);
lg2.addColorStop(0,"#030");
lg2.addColorStop(1.0,"#580");
context.fillStyle = lg2;
context.fill();
context.restore();
}
</script>
</body>
</html>
慕仰0443758