在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>
添加回答
举报
0/150
提交
取消