HTML5 Canvas中 fillText() 和 strokeText() 的区别
来源:互联网 发布:the color run 知乎 编辑:程序博客网 时间:2024/06/05 06:43
前言
Canvas现在越来越多地被运用到我们的项目中了,所以对Canvas的研究也得跟上呀,不然就被时代抛弃了。这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 strokeText 的区别,代码及效果图片演示。
效果演示
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
canvas{border: 1px solid #ccc}
</style>
</head>
<body>
<canvas id="mycanvas" width='580' height='350' >浏览器不支持Canvas,请升级或改用其它浏览器!</canvas>
<script src="./js/canvas.js"></script>
</body>
</html>
JavaScript代码
window.onload = function(){
var mycanvas = document.getElementById('mycanvas');
var ctx = mycanvas.getContext('2d');
ctx.font ='68px Arial';
ctx.fillStyle = '#0099CC';
ctx.fillText('云库网 - 前端开发',25,130);
ctx.strokeStyle = '#000';
ctx.strokeText('云库网 - 前端开发',25,260);
}
最终效果展示
浏览器支持
语法
fillText()
HTML5 canvas fillText() 方法
定义及用法:fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
浏览器支持:Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fillText() 方法。
语法:context.fillText(text,x,y,maxWidth);
strokeText()
HTML5 canvas strokeText() 方法
定义及用法:strokeText() 方法是用来在画布上绘制文本(没有填色)。文本的默认颜色是黑色。
浏览器支持:Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 strokeText() 方法。
语法:context.strokeText(text,x,y,maxWidth);
注意:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。所在放弃IE吧!
如果想给字体更换颜色,可以用例子中的 ctx.fillStyle = ‘#0099CC’;ctx.strokeStyle = ‘#000’;这两行代码分别是给fillText()方法和strokeText()方法所绘出的字更换颜色的。注意:fillText()方法对应的是 ctx.fillStyle = ‘#0099CC’;;strokeText() 方法对应的是 ctx.strokeStyle = ‘#000′;代码中的 ctx.font =’68px Arial’; 是定义字体及字体大小。
相关资料
火狐MDN(fillText()):https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText
火狐MDN(strokeText()):https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeText
首发于:云库前端( http://yunkus.com )有什么问题可以在这里或者到我的博客留言!
- HTML5 Canvas中 fillText() 和 strokeText() 的区别
- HTML5中Canvas rect(), strokeRect() 和 fillRect() 的区别
- HTML5中canvas的使用
- HTML5中canvas的lineTo和moveTo的用法
- html5中svg,canvas和图片之间的相互转化
- HTML5 SVG与Canvas的区别
- HTML5(四)html5<canvas路径和三角函数的故事>(中)
- canvas.save()和canvas.restore()的区别
- HTMl5中sessionStorage和localStorage的区别
- HTML5中Canvas与SVG的比较
- HTML5中Canvas画图片的问题
- HTML5中Canvas的drawText对齐细节
- HTML5中canvas的使用介绍
- HTML5中canvas的fillRect、arc用法
- HTML5中canvas的二次曲线用法
- HTML5中canvas线性渐变的用法
- HTML5中Canvas与SVG的画图
- [HTML5-Canvas] HTML 5的<canvas>元素教程和实例
- [Unity]箭头2D图片精灵的Pivot锚点怎么设置
- Android studio中如何将Module依赖到主工程
- GitChat在做什么
- input标签内正则验证
- 关闭chrome浏览器的developer tools
- HTML5 Canvas中 fillText() 和 strokeText() 的区别
- 手把手教你用Mysql-Cluster-7.5搭建数据库集群
- MySQL安装及基本命令
- 建立(new)对象模式1:Sigleton
- try-catch-finally语句块之揭开finally的神秘面纱
- 创建房间和加入房间模块(客户端)
- HTML+CSS编写静态网站-24 调整页面文本
- 三国志11 脚本
- Android推送实现原理