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 相关文章推荐
css3模拟jq点击事件的实例代码
Jul 06 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 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
星际玩家的三大定律
2020/03/04 星际争霸
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
用console.table()调试javascript
2014/09/04 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python保存数据到本地文件的方法
2018/06/23 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python restful框架接口开发实现
2020/04/13 Python
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
两道JAVA笔试题
2016/09/14 面试题
自动化专业本科毕业生求职信
2013/10/20 职场文书
护理实习自我鉴定
2013/12/14 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
实习生矿工检讨书
2014/10/13 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
Python实现位图分割的效果
2021/11/20 Python