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 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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类声明和php类使用方法示例分享
2014/03/29 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
javascript中xml操作实现代码
2011/11/21 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
详解Python中的Cookie模块使用
2015/07/06 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python的变量与赋值详细分析
2017/11/08 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Python 支付整合开发包的实现
2019/01/23 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
通信工程专业女生个人求职信
2013/09/21 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
小学课外阅读总结
2014/07/09 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
python如何将mat文件转为png
2022/07/15 Python