HTML5 canvas基本绘图之文字渲染


Posted in HTML / CSS onJune 27, 2016

与文本渲染有关的主要有三个属性以及三个方法:

HTML5 canvas基本绘图之文字渲染

上述的属性和方法的基本用法如下:

JavaScript Code复制内容到剪贴板
  1. var canvas = document.getElementById("canvas");   
  2.     var context = canvas.getContext("2d");   
  3.   
  4.     context.font="bold 30px Arial"//设置样式   
  5.     context.strokeStyle = "#1712F4";   
  6.     context.strokeText("欢迎来到我的博客!",30,100);   
  7.   
  8.     context.font="bold 50px Arial";    
  9.     var grd = context.createLinearGradient( 30 , 200, 400 , 300 );//设置渐变填充样式   
  10.     grd.addColorStop(0,"#1EF9F7");   
  11.     grd.addColorStop(0.25,"#FC0F31");   
  12.     grd.addColorStop(0.5,"#ECF811");   
  13.     grd.addColorStop(0.75,"#2F0AF1");   
  14.     grd.addColorStop(1,"#160303");   
  15.     context.fillStyle = grd;   
  16.     context.fillText("欢迎来到我的博客!",30,200);   
  17.   
  18.     context.save();   
  19.     context.moveTo(200,280);   
  20.     context.lineTo(200,420);   
  21.     context.stroke();   
  22.     context.font="bold 20px Arial";    
  23.     context.fillStyle = "#F80707";   
  24.     context.textAlign="left";   
  25.     context.fillText("文本在指定的位置开始",200,300);   
  26.     context.textAlign="center";   
  27.     context.fillText("文本的中心被放置在指定的位置",200,350);   
  28.     context.textAlign="right";   
  29.     context.fillText("文本在指定的位置结束",200,400);   
  30.     context.restore();   
  31.   
  32.     context.save();   
  33.     context.moveTo(10,500);   
  34.     context.lineTo(500,500);   
  35.     context.stroke();   
  36.     context.fillStyle="#F60D0D";   
  37.     context.font="bold 20px Arial";    
  38.     context.textBaseline="top";   
  39.     context.fillText("指定位置在上面",10,500);   
  40.     context.textBaseline="bottom";   
  41.     context.fillText("指定位置在下面",150,500);   
  42.     context.textBaseline="middle";   
  43.     context.fillText("指定位置居中",300,500);   
  44.     context.restore();   
  45.   
  46.   
  47.     context.font="bold 40px Arial";    
  48.     context.strokeStyle = "#16F643";   
  49.     var text = "欢迎来到我的博客!";   
  50.     context.strokeText("欢迎来到我的博客!",10,600);   
  51.     context.strokeText("上面字符串的宽度为:"+context.measureText(text).width,10,650);   
  52.   

效果如下:

HTML5 canvas基本绘图之文字渲染

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
HTML / CSS 相关文章推荐
css3动画效果抖动解决方法
Sep 03 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 #HTML / CSS
浅析HTML5中header标签的用法
Jun 24 #HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 #HTML / CSS
You might like
php生成唯一的订单函数分享
2015/02/02 PHP
学习YUI.Ext第五日--做拖放Darg&Drop
2007/03/10 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python实现的字典值比较功能示例
2018/01/08 Python
dpn网络的pytorch实现方式
2020/01/14 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
python自动化发送邮件实例讲解
2021/01/04 Python
python中time tzset()函数实例用法
2021/02/18 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
高中生学习生活的自我评价
2013/11/27 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
学生党员公开承诺书
2014/05/28 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js
mysql查找连续出现n次以上的数字
2022/05/11 MySQL