使用HTML5 Canvas API控制字体的显示与渲染的方法

        gradient.addColorStop("0.5","blue");   
        gradient.addColorStop("1.0","red");   
        context.fillStyle = gradient;   
        context.strokeStyle = "#00AAAA";   
        context.strokeText("airingursb.github.io", 50, 100);   
        context.fillText("airingursb.github.io", 50, 200);   
  
        //限制宽度   
        context.fillText("airingursb.github.io", 50, 300, 200);   
  
        context.beginPath();   
        var img = new Image();   
        img.src = "./images/bg1.jpg";   
        img.onload = function(){   
            var pattern = context.createPattern(img, "repeat");   
            context.fillStyle = pattern;   
            context.fillText("airingursb.github.io", 50, 400);   
        }   
  
        context.beginPath();   
        context.fillStyle = "#00AAAA";   
        context.fillText("Airing的博客，欢迎访问", 50, 500);   
    };   
</script>   
</body>   
</html>  

运行结果：

这里第一行使用的是一般颜色的strokeText()方法，第二行使用的是渐变色的fillText()方法，第三行设置了maxlen，第四行给字体填充的是纹理图案，第五行是广告……