HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)

前端技术 2023/09/08 HTML
演示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>

本文地址：https://www.stayed.cn/item/23215

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案