足球游戏_中国足彩网¥体育资讯$

HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
来源:易贤网 阅读:1486 次 日期:2016-07-13 14:15:37
温馨提示:易贤网小编为您整理了“HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)”,方便广大网友查阅!

本文为大家详细介绍下HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边、颜色填充与描边,具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助

演示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=gbk">

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

中国足彩网信息请查看网页制作
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标