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特效之动画:animation的应用
May 09 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
CSS的calc函数用法小结
Jun 25 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中SESSION的注销与清除
2015/04/16 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
javascript如何创建对象
2016/08/29 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python多进程实现进程间通信实例
2017/11/24 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
2014年大学生村官工作总结
2014/11/19 职场文书
事业单位年度考核评语
2014/12/31 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
python 命令行传参方法总结
2021/05/25 Python
python基础学习之递归函数知识总结
2021/05/26 Python