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 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 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中将网址转换为超链接的函数
2011/09/02 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Python 正则表达式操作指南
2009/05/04 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
GWebs公司笔试题
2012/05/04 面试题
企业内控岗位的职责
2014/02/07 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
上课说话检讨书500字
2014/11/01 职场文书
英语邀请函范文
2015/02/02 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android