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 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 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下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
PHP中设置时区方法小结
2012/06/03 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
javascript中xml操作实现代码
2011/11/21 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
python常见排序算法基础教程
2017/04/13 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
django的model操作汇整详解
2019/07/26 Python
python3使用GUI统计代码量
2019/09/18 Python
Aosom西班牙:家具在线商店
2020/06/11 全球购物
影视艺术学院毕业生自荐信
2013/11/13 职场文书
营销总经理岗位职责
2014/02/02 职场文书
海飞丝的广告词
2014/03/20 职场文书
2014年村委会工作总结
2014/11/24 职场文书
爱晚亭导游词
2015/02/09 职场文书
销售助理岗位职责
2015/02/11 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL