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圆角属性
Apr 02 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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
php文件上传简单实现方法
2015/01/24 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
JS跨域总结
2012/08/30 Javascript
JS模板实现方法
2013/04/03 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python计算已经过去多少个周末的方法
2015/07/25 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
天游软件面试
2013/11/23 面试题
医生实习工作总结的自我评价
2013/09/27 职场文书
高中生的自我评价
2014/03/04 职场文书
学习十八大演讲稿
2014/09/15 职场文书
技术员岗位职责
2015/02/04 职场文书
世界文化遗产导游词
2015/02/13 职场文书
学习雷锋主题班会
2015/08/14 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js