canvas基础学习笔记（四）

作者: 开心糖果的夏天 | 来源:发表于2017-05-02 07:45 被阅读95次

文字渲染

文字是页面制作必不可少的一部分，漂亮的文字会使网页赏心悦目，关于文字，我们可以设置它的字型、大小、填充、渐变色等等。示例代码如下：

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=800;
       canvas.height=800;
    
       var context=canvas.getContext('2d');
       
       //开始编码
      context.font="bold 40px Arial";
      context.fillStyle="#058";
      context.fillText("欢迎大家多提意见！",40,100);

      context.lineWidth=1;
      context.strokeStyle="#058";
      context.strokeText("欢迎大家多提意见！",40,200);

       //可选参用于控制字符的长度
      context.fillText("欢迎大家多提意见！",40,300,100);
      context.strokeText("欢迎大家多提意见！",40,400,100);

        //渐变字体
       var linearGrad=context.createLinearGradient(0,0,800,0);//水平渐变方向
       linearGrad.addColorStop(0.0,'red');
       linearGrad.addColorStop(0.25,'yellow');
       linearGrad.addColorStop(0.5,'green');
       linearGrad.addColorStop(0.75,'blue');
       linearGrad.addColorStop(1.0,'black');
       context.fillStyle=linearGrad;
       context.fillText("欢迎大家多提意见！",40,500);

       //利用图片填充字体
       var backgroundImage=new Image();
       backgroundImage.src="img/1.jpg";
       backgroundImage.onload=function(){
        var pattern=context.createPattern(backgroundImage,"repeat");
        context.fillStyle=pattern;
        context.font="bold 80px Arial";
        context.fillText("Canvas！",40,650);
        context.strokeText("Canvas！",40,650);//描边
     }
}
</script>

一、font：字型、字号和字体

context.font="bold 80px Arial";//设置字体的样式、大小、字型
context.fillText(String,x,y);//设置所填充的文字以及位置
context.strokeText(String,x,y);//绘制一行文字，这行文字只有外边框

context.fillText(String,x,y,[maxlen]);
context.strokeText(String,x,y,[maxlen]);
[maxlen]为可选参，描述所写文字的最长宽度为多少。

font-style的属性值：normal（默认值）、italic（斜体字）、oblique（倾斜字体）；
font-variant的属性值：normal（默认值）、small-caps（小写字母变为小的大写字母）；
font-weight的属性值：lighter（大多数浏览器不支持）、normal（默认值）、bold、bolder（大多数浏览器不支持）；
font-size的属性值：20px（默认值）、2em、150%、xx-small、x-small、medium、large、x-large、xx-large；
font-family:设置多种字体备选（各个字体之间用逗号隔开）；支持@font-face。

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=800;
       canvas.height=2000;
    
       var context=canvas.getContext('2d');
       
      //font-style的属性值
      context.fillStyle="#058";

      context.font="bold 40px sans-serif";
      context.fillText("欢迎大家多提意见！",40,100);
      
      context.font="italic bold 40px sans-serif";
      context.fillText("欢迎大家多提意见！",40,200);

      context.font="oblique bold 40px sans-serif";
      context.fillText("欢迎大家多提意见！",40,300);
      
      //font-variant的属性值
      context.font="bold 40px sans-serif";
      context.fillText("欢迎大家多提意见——Canvas！",40,400);
      
      context.font="small-caps bold 40px sans-serif";
      context.fillText("欢迎大家多提意见——Canvas！",40,500);

      //font-weight的属性值
      context.font="lighter 40px impact";
      context.fillText("欢迎大家多提意见！",40,600);
      
      context.font="normal 40px impact";
      context.fillText("欢迎大家多提意见！",40,700);

      context.font="bold 40px impact";
      context.fillText("欢迎大家多提意见！",40,800);
   
      context.font="bolder 40px impact";
      context.fillText("欢迎大家多提意见！",40,900);

      //font-size的属性值
      context.font="lighter 2em impact";
      context.fillText("欢迎大家多提意见！",40,1000);

      context.font="xx-small  sans-serif";
      context.fillText("欢迎大家多提意见——Canvas！",40,1100);

      context.font="x-small  sans-serif";
      context.fillText("欢迎大家多提意见——Canvas！",40,1200);

      context.font="medium sans-serif";
      context.fillText("欢迎大家多提意见——Canvas！",40,1300);

      context.font="large sans-serif";
      context.fillText("欢迎大家多提意见——Canvas！",40,1400);

      context.font="x-large sans-serif";
      context.fillText("欢迎大家多提意见——Canvas！",40,1500);

      context.font="xx-large  sans-serif";
      context.fillText("欢迎大家多提意见——Canvas！",40,1600);
}
</script>

二、文本对齐

1.描述文本的横向对齐方式（基准是给定文本的初始坐标值）

context.textAlign="left";
context.textAlign="right";
context.textAlign="center";

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=800;
       canvas.height=800;
    
       var context=canvas.getContext('2d');
       
      //文本水平对齐
      context.fillStyle="#058";
      context.font="bold 20px sans-serif";

      context.textAlign="left";
      context.fillText("textAlign=left",400,100);

      context.textAlign="center";
      context.fillText("textAlign=center",400,200);

      context.textAlign="right";
      context.fillText("textAlign=right",400,300);
      
     //辅助线
     context.strokeStyle="#888";
     context.moveTo(400,0);
     context.lineTo(400,400);
     context.stroke();     
}
</script>

2.描述文本的垂直对齐方式

context.textBaseline="top";
context.textBaseline="middle";
context.textBaseline="bottom";
context.textBaseline="alphabetic";//（默认值）基于拉丁字符的语言
context.textBaseline="ideographic";//基于汉字及日本文字来设置的垂直方向的基准线
context.textBaseline="hanging";//基于印度文的字符串来设计的垂直方向的基准线

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=800;
       canvas.height=800;
    
       var context=canvas.getContext('2d');
       
      //文本垂直对齐 
      context.fillStyle="#058";
      context.font="bold 20px sans-serif";

     context.textBaseline="top";
     context.fillText("欢迎大家提意见!",40,100);
     drawBaseline(context,100);

     context.textBaseline="middle";
     context.fillText("欢迎大家提意见！",40,200);
     drawBaseline(context,200);

     context.textBaseline="bottom";
     context.fillText("欢迎大家提意见！",40,300);
     drawBaseline(context,300);
     
     function drawBaseline(cxt,b){
       var width=cxt.canvas.width;

       cxt.save();
      
       cxt.strokeStyle="#888";
       cxt.lineWidth=2;
       cxt.moveTo(0,b);
       cxt.lineTo(width,b);
       cxt.stroke();

       cxt.restore();
     }    
}
</script>

3.文本对齐小实例

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=800;
       canvas.height=800;
    
       var context=canvas.getContext('2d');
       

      //文本垂直对齐 
      context.fillStyle="#058";
      context.font="bold 120px Arial";

      context.textAlign="center";
      context.textBaseline="middle";
      context.fillText("CANVAS",canvas.width/2,canvas.height/2);
    
       context.strokeStyle="#888";
       context.moveTo(0,canvas.height/2);
       context.lineTo(canvas.width,canvas.height/2);
       context.moveTo(canvas.width/2,0);
       context.lineTo(canvas.width/2,canvas.height);
       context.stroke();  
     }
</script>

三、文本的度量

context.measureText(string).width
传入字符串将返回一个对象，这个对象拥有一个.width的属性，这个属性将返回传入字符串在canvas中渲染时渲染出的字符串的宽度。

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=800;
       canvas.height=800;
    
       var context=canvas.getContext('2d');
      
      //文本垂直对齐 
      context.fillStyle="#058";
      context.font="bold 40px sans-serif";

      context.fillText("欢迎大家多提意见！",40,100);
      var textWidth=context.measureText("欢迎大家多提意见！").width;
      context.fillText("以上字符串的宽度为"+textWidth+"px",40,200);
     }
</script>

四、总结

在之前学习的基础上绘制一片星空并在合适的位置加上文字，效果图如下：

效果图.jpg

代码如下：

<body >
 <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto">
 当前浏览器不支持canvas，请更换浏览器后再试
 </canvas>

<script type="text/javascript">
    window.onload=function(){
       var canvas=document.getElementById('canvas');
      
       canvas.width=1024;
       canvas.height=800;
    
       var context=canvas.getContext('2d');

       //绘制标准五角星
       var skyStyle=context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);
       skyStyle.addColorStop(0.0,'#035');
       skyStyle.addColorStop(1.0,'black');
       context.fillStyle=skyStyle;
       context.fillRect(0,0,canvas.width,canvas.height);

        for(var i=0;i<200;i++){
        var R=Math.random()*5+5;//星星可以变小
        var x=Math.random()*canvas.width;
        var y=Math.random()*canvas.height*0.65;//js 中的Math.random()随机产生0-1之间的数  星星产生的竖直位置从0到画布高度的65%
        var a=Math.random()*360;
        drawStar(context,R,x,y,a);
        }
       fillMoon(context,2,900,200,50,30);
       drawLand(context);//绘制绿地,只需要传入上下文的绘图环境

       //************************************插入文字
      context.fillStyle="#eee";
      context.font="bold 30px sans-serif";

      context.fillText("开心糖果的夏天！",200,700);
      context.fillText("——zhao peirong！",600,750);
      }

      //******************************************绘制星星
      function drawStar(cxt,R,x,y,rot){
       cxt.save();

       cxt.translate(x,y);//位移
       cxt.rotate(rot/180*Math.PI);//旋转
       cxt.scale(R,R);
       starPath(cxt);//函数的作用是绘制标准的五角星的路径

       cxt.fillStyle="#fb3";
       cxt.fill();
       cxt.restore();
      }
      
      function starPath(cxt){
      cxt.beginPath();
       for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),-Math.sin((18+i*72)/180*Math.PI));
            cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,-Math.sin((54+i*72)/180*Math.PI)*0.5);
       }
       cxt.closePath();
      }

      //******************************************绘制月亮
       //d为控制点横坐标的值  x,y表示弯月的位置 R表示弯月的半径
      function fillMoon(cxt,d,x,y,R,rot,fillColor){
       cxt.save();

       cxt.translate(x,y);
       cxt.rotate(rot*Math.PI/180);
       cxt.scale(R,R);
       pathMoon(cxt,d);//绘制弯月的轮廓
       cxt.fillStyle=fillColor||"#fb3";//fillColor 不给赋值时，用默认的#fb5
       cxt.fill();

       cxt.restore();
      }
      
      function pathMoon(cxt,d){
       cxt.beginPath();
       cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);
       cxt.moveTo(0,-1);
       cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);//内弧结束的位置为0,1
       cxt.closePath();
      }

      function dis(x1,y1,x2,y2){
        return Math.sqrt((x1-x2)*(x1-x2)+(y2-y1)*(y2-y1));     
      }

      //******************************************绘制绿地
      function drawLand(cxt){
        cxt.save();
        
        cxt.beginPath();
        cxt.moveTo(0,600);
        cxt.bezierCurveTo(540,400,660,800,1200,600);
        cxt.lineTo(1200,800);
        cxt.lineTo(0,800);
        cxt.closePath();

       //填充线性渐变色
       var landStyle=cxt.createLinearGradient(0,800,0,0);
       landStyle.addColorStop(0.0,'#030');
       landStyle.addColorStop(1.0,'#580');
       cxt.fillStyle=landStyle;
       cxt.fill();

       cxt.restore();
      }
</script>
</body>

canvas基础学习笔记（四）

文字渲染

一、font：字型、字号和字体

二、文本对齐

1.描述文本的横向对齐方式（基准是给定文本的初始坐标值）

2.描述文本的垂直对齐方式

3.文本对齐小实例

三、文本的度量

四、总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

canvas