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

PHPABC Html5 984 次浏览 , 没有评论

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

纹理图片:

三:运行效果

// global variable 2d context  
var ctx = null;   
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.");  
        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);  
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go