11、canvas标签之绘制文本

来源：互联网发布：淘宝客服团队建设编辑：程序博客网时间：2024/06/11 09:51

绘制文本
  .strokeText(文本,x,y); 绘制空心文本
.fillText(文本,x,y);绘制实心文本
.font = "font-size font-family"注:尺寸字体缺一不可
.textAlign = " ";文本左右对齐方式
      start center end left right
.textBaseline=" ";文本上下对齐方式
      alphabetic默认。文本基线是普通的字母基线。
      top文本基线是 em 方框的顶端。。
      hanging文本基线是悬挂基线。
      middle文本基线是 em 方框的正中。
      ideographic文本基线是表意基线。
      bottom文本基线是 em 方框的底端。
.measureText(文本).width;文本实际宽度(只有宽度值)

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/canvas{background:#9f6;margin:100px auto;display:block;/*否则margin中的auto值不管用，其不算标准的块标签*/}</style></head><body><!--身体--><canvas width="500" height="500" id="can">您的浏览器不支持canvas标签，请您更换浏览器！！</canvas><script>/*绘制文本strokeText(文本,x,y);  绘制空心文本fillText(文本,x,y); 绘制实心文本font = "font-size  font-family" 注:尺寸 字体缺一不可textAlign = "";文本左右对齐方式 start center end  left righttextBaseline文本上下对齐方式 alphabetic默认。文本基线是普通的字母基线。top文本基线是 em 方框的顶端。。hanging文本基线是悬挂基线。middle文本基线是 em 方框的正中。ideographic文本基线是表意基线。bottom文本基线是 em 方框的底端。measureText(文本).width; 文本实际宽度(只有宽度值)*/var can = document.getElementById("can");var cxt = can.getContext("2d");cxt.font="50px '微软雅黑'";//设置字体cxt.textAlign="start";//文本左右对齐方式 cxt.textBaseline="top"//文本上下对齐方式 cxt.strokeText("中国你好！",0,0);//绘制空心文本cxt.fillText("中国你好！",150,200);//绘制实心文本var fw = cxt.measureText("吹泡泡163").width;cxt.fillText("吹泡泡163",(can.width-fw)/2,300);//让其居中显示</script></body></html>

0 0