Canvas文字的渲染基础 Better

基础使用

context.font = "bold 40px Arial"

context.fillStyle = "#058"

context.fillText( string, x, y, [maxlen] ) // 实心文字

context.strokeText( string, x, y [maxlen] ) // 描边文字

进阶使用

1. 渐变

   var lenerGrad = context.createLinearGradient(0, 0, 800, 0);
   linearGrad.addColorStop(0.0, 'red');
   linearGrad.addColorStop(0.5, 'yellow');
   linearGrad.addColorStop(1.0, 'blue');
   context.fillStyle = linearGrad;
   context.fillText("hello world", 40, 500 );
   

2. 图片背景

   var backgroundImg = new Image();
   backgroundImg.src = 'xxx.jpg';
   backgroundImg.onload = function() {
       var pattern = context.createPattern( backgroundImg, 'repeat');
       context.fillStyle = pattern;
       context.font = "bold 100px Arial";
       context.fillText("hello world", 40, 650);
   }