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>

HTML5 Canvas 填充与描边(Fill And Stroke)的更多相关文章

  1. HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. html5 canvas 垂直渐变描边

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. html5 canvas 水平渐变描边

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. html5 canvas 填充渐变形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML5 Canvas一些常用的操作

    粗略的Canvas API 1. context var context = canvas.getContext('2d'); 2.Canvas state context.save();//将当前状 ...

  6. HTML5 canvas 指针时钟

    <!doctype html> <html> <head></head> <body> <canvas id="> 您 ...

  7. HTML5 Canvas 颜色填充学习

    ---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...

  8. HTML5 Canvas渐进填充与透明

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使 用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canv ...

  9. Canvas路径、描边、填充

    <script> var context = document.getElementById('canvas').getContext('2d'); context.font = '48p ...

随机推荐

  1. HTML学习笔记(七)

    1.       假设想让div中的内容(content)垂直居中,能够将line-height的值设置与div的高度相等来实现. 2.       超伪类链接的四种形式: watermark/2/t ...

  2. 微信5.0 Android版飞机大战破解无敌模式手记

    微信5.0 Android版飞机大战破解无敌模式手记 转载: http://www.blogjava.net/zh-weir/archive/2013/08/14/402821.html 微信5.0 ...

  3. 上一篇括号配对让人联想起catalan数,顺便转载一篇归纳的还不错的文章

    转载请注明来自souldak,微博:@evagle 怎么样才是合法的组合? 只要每一时刻保证左括号的数目>=右括号的数目即可. 直接递归就行,每次递归加一个括号,左括号只要还有就能加,右括号要保 ...

  4. codility上的问题(18) Rho 2012

    从正整数1开始,产生一个数列,数列中的每个数是之前出现过的任意两个数的和(可以相等),问产生正整数A,需要的数列长度至少是多少?返回这样一个最短的序列. 例如A=42 可以这样[1, 2, 3, 6, ...

  5. Java中怎么控制线程訪问资源的数量

    在API中是这样来描写叙述Semaphore 的 Semaphore 通经常使用于限制能够訪问某些资源(物理或逻辑的)的线程数目. 一个计数信号量.从概念上讲,信号量维护了一个许可集.如有必要,在许可 ...

  6. PP屏幕增强点

    生产订单CO01/CO02/CO03屏幕增强 smod:PPCO0012 工票输入CO11N SMOD:CONFPP07 增强里经常会用内存读取数据:比如: ) TYPE c. FIELD-SYMBO ...

  7. 使用JDBC获取能自动增加的主键

    本篇讲述如何使用JDBC获取能自动增加的主键的值.有时候我们在向数据库插入数据时希望能返回主键的值,而不是通过查询的方式.一般来说,在多表相互关联主键约束,也就是说别的表的外键约束是该表的主键,那么在 ...

  8. JDK 安装以及环境变量的配置(Windows)

    首先下载对应版本的jdk ,然后安装,这里使用的是jdk 1.7的安装的 这个时候,JDK 已经安装完成,打开cmd 输入 java -version 就可以查看到,当前JDK 的版本如图 JDK 安 ...

  9. redis+tomcat共享session问题(转)

    为了让楼主看看Java开发是多么的简单和轻松,你说你耗时一周都没搞好,简直就是胡说八道!!我从没搞过reids和tomcat整合的(我做的项目一直都是去session用cookie,为了验证你在胡说八 ...

  10. Python金融应用编程(数据分析、定价与量化投资)

    近年来,金融领域的量化分析越来越受到理论界与实务界的重视,量化分析的技术也取得了较大的进展,成为备受关注的一个热点领域.所谓金融量化,就是将金融分析理论与计算机编程技术相结合,更为有效的利用现代计算技 ...