在canvas里加了幾個文字，想應(yīng)用@font-face添加網(wǎng)上下載的字體，怎么沒效果<!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){ ? ? ? ? ? ?/*畫一輪彎月的通用函數(shù)*/? ? ? ? ? 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>
canvas應(yīng)用@font-face哪里不對嗎怎么沒有字體效果
慕仰0443758
2017-07-15 10:40:17
