HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)


Posted in HTML / CSS onJuly 15, 2013

演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边。

一:颜色填充与描边
颜色填充可以通过fillStyle来实现,描边颜色可以通过strokeStyle来实现。简单示例
如下:

复制代码
代码如下:

// fill and stroke text
ctx.font = '60pt Calibri';
ctx.lineWidth = 3;
ctx.strokeStyle = 'green';
ctx.strokeText('Hello World!', 20, 100);
ctx.fillStyle = 'red';
ctx.fillText('Hello World!', 20, 100);

二:纹理填充与描边
HTML5 Canvas还支持纹理填充,通过加载一张纹理图像,然后创建画笔模式,创建纹理模式的API为ctx.createPattern(imageTexture,"repeat");第二参数支持四个值,分别为”repeat-x”, ”repeat-y”, ”repeat”,”no-repeat”意思是纹理分别沿着X轴,Y轴,XY方向沿重复或者不重复。纹理描边与填充的代码如下:
复制代码
代码如下:

var woodfill = ctx.createPattern(imageTexture,"repeat");
ctx.strokeStyle = woodfill;
ctx.strokeText('Hello World!', 20, 200);
// fill rectangle
ctx.fillStyle = woodfill;
ctx.fillRect(60, 240, 260, 440);

纹理图片:
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke) 
三:运行效果
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke) 
代码:
复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Canvas Fill And Stroke Text Demo</title>
<link href="default.css" rel="stylesheet" />
<script>
var ctx = null; // global variable 2d context
var imageTexture = null;
window.onload = function() {
var canvas = document.getElementById("text_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw rectangel
ctx = canvas.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// fill and stroke text
ctx.font = '60pt Calibri';
ctx.lineWidth = 3;
ctx.strokeStyle = 'green';
ctx.strokeText('Hello World!', 20, 100);
ctx.fillStyle = 'red';
ctx.fillText('Hello World!', 20, 100);
// fill and stroke by pattern
imageTexture = document.createElement('img');
imageTexture.src = "../pattern.png";
imageTexture.onload = loaded();
}
function loaded() {
// delay to image loaded
setTimeout(textureFill, 1000/30);
}
function textureFill() {
// var woodfill = ctx.createPattern(imageTexture, "repeat-x");
// var woodfill = ctx.createPattern(imageTexture, "repeat-y");
// var woodfill = ctx.createPattern(imageTexture, "no-repeat");
var woodfill = ctx.createPattern(imageTexture, "repeat");
ctx.strokeStyle = woodfill;
ctx.strokeText('Hello World!', 20, 200);
// fill rectangle
ctx.fillStyle = woodfill;
ctx.fillRect(60, 240, 260, 440);
}
</script>
</head>
<body>
<h1>HTML5 Canvas Text Demo - By Gloomy Fish</h1>
<pre>Fill And Stroke</pre>
<div id="my_painter">
<canvas id="text_canvas"></canvas>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 #HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 #HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 #HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 #HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 #HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 #HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 #HTML / CSS
You might like
thinkphp的c方法使用示例
2014/02/24 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python批量转换文件编码格式
2015/05/17 Python
Python的多态性实例分析
2015/07/07 Python
python win32 简单操作方法
2017/05/25 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python实现名片管理器的示例代码
2019/12/17 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
高中生校园生活自我评价
2013/09/19 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
干部考察材料范文
2014/12/24 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
微信小程序实现聊天室功能
2021/06/14 Javascript