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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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环境无法上传文件的解决方法
2014/04/30 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
python操作yaml说明
2020/04/08 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
公务员培训心得体会
2013/12/28 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
销售员试用期自我评价
2014/09/15 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技