HTML5 Canvas 填充与描边(Fill And Stroke)

简介: HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边。 一:颜色填充与描边 颜色填充可以通过fillStyle来实现,描边颜色可以通过strokeStyle来实现。

HTML5 Canvas 填充与描边(Fill And Stroke)

演示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);

纹理图片:


三:运行效果

代码:

<!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>

目录
相关文章
|
9月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
128 29
|
9月前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
80 1
|
10月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
137 5
|
11月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
93 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
11月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
115 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
11月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
105 5
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
4月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
4月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成

热门文章

最新文章