canvas应用@font-face哪里不对吗怎么没有字体效果

首页课程实战体系课手记专栏慕课教程

canvas应用@font-face哪里不对吗怎么没有字体效果

在canvas里加了几个文字，想应用@font-face添加网上下载的字体，怎么没效果

<!DOCTYPE html>

<html>

<head>

<title>translate、scale的使用</title>

@font-face{

font-family: "myfont";

src:url("fonts/BetterTogetherScript.ttf") format('truetype');

font-style: italic;

font-weight: bold;

}

</style>

</head>

<body>

您的浏览器out啦，赶快更新至最新版本

</canvas>

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

浏览 2133回答 1

1回答

慕仰0443758

沉了吗

0 0

随时随地看视频慕课网APP