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代码实现的动画导航
Oct 31 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 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 intval的测试代码发现问题
2008/07/27 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
小区门卫值班制度
2014/01/24 职场文书
先进个人事迹材料
2014/01/25 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
大专学生求职自荐信
2014/07/06 职场文书
资料员岗位职责
2015/02/10 职场文书
安全保证书怎么写
2015/02/28 职场文书
教师岗位说明书
2015/09/30 职场文书
神州牡丹园的导游词
2019/11/20 职场文书