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 translate完美实现表头固定效果
Feb 28 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python实现读取json文件到excel表
2017/11/18 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
Django实现文件上传下载功能
2019/10/06 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
10个示例带你掌握python中的元组
2020/11/23 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
机电一体化大学生求职信
2013/11/08 职场文书
班主任工作年限证明
2014/01/12 职场文书
四年级语文教学反思
2014/02/05 职场文书
灵魂歌王观后感
2015/06/17 职场文书
培训心得体会怎么写
2016/01/25 职场文书
导游词之塘栖古镇
2019/12/04 职场文书