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

飞过の海

飞过の海

2016-02-19 10:38

今天图老师小编给大家精心推荐个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"
titleCanvas 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
h1HTML5 Canvas Text Demo - By Gloomy Fish/h1
preFill And Stroke/pre
div id="my_painter"
canvas id="text_canvas"/canvas
/div
/body
/html
展开更多 50%)
分享

猜你喜欢

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

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

HTML5 Canvas渐进填充与透明实现图像的Mask效果

Web开发
HTML5 Canvas渐进填充与透明实现图像的Mask效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML5 canvas 基本语法

Web开发
HTML5 canvas 基本语法

HTML5 Canvas概述

Web开发
HTML5 Canvas概述

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML5 Canvas鼠标与键盘事件demo示例

Web开发
HTML5 Canvas鼠标与键盘事件demo示例

HTML5 Canvas 起步(2) - 路径

Web开发
HTML5 Canvas 起步(2) - 路径

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

QQ空间中如何设置“定时赠送”礼物?

QQ空间中如何设置“定时赠送”礼物?

HTML5注册表单的自动聚焦与占位文本示例代码

HTML5注册表单的自动聚焦与占位文本示例代码
下拉加载更多内容 ↓