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. lua 与 php 通过AES数据加密进行通讯

    近期公司有款<围住神经猫>的微信小游戏火爆的不行!公司又决定开发一系列的神经猫的小游戏,于是,我被拉过来了. 后来使用cocos-2dx 开发一款小游戏,client用的是lua脚本,为了 ...

  2. js 动态切换视频

    如图所示,想要一个这样的效果,就是点击下面视频标题时,上面的视频跟着切换,但是要求页面不重新加载. 参考文章在这里 这里贴上部分代码供大家参考. <li id="about_li6&q ...

  3. perl uri_escape(urlencode ) 转换

    [root@wx03 lib]# cat a1.pl #引入模块 use URI::Escape; #urlencode $encoded = uri_escape("[中均]") ...

  4. python 站点爬虫 下载在线盗墓笔记小说到本地的脚本

    近期闲着没事想看小说,找到一个全是南派三叔的小说的站点,决定都下载下来看看,于是动手,在非常多QQ群里高手的帮助下(本人正則表達式非常烂.程序复杂的正则都是一些高手指导的),花了三四天写了一个脚本 须 ...

  5. 大豆生物柴油驱动的大巴斯（Bus）

    请看下图: 这是大豆生物柴油(Soybean biodiesel)驱动的大巴斯(Bus)的外观,感觉非常有劲. 回想历史,1893年,德国学者Rudolf Diesel(1858-1913)发明了一种 ...

  6. gbs build使用说明

    注:本文从:https://source.tizen.org/documentation/articles/gbs-build 翻译而来. 1 前言 通过使用gbs build指令,开发者可以在本地编 ...

  7. 高斯消元法~get√

    高斯消元法,是线性代数中的一个算法,可用来求解线性方程组,并可以求出矩阵的秩,以及求出可逆方阵的逆矩阵.高斯消元法的原理是:若用初等行变换将增广矩阵 化为 ,则AX = B与CX = D是同解方程组. ...

  8. cocos2d-x游戏开发系列教程-前言

    cocos2d-x游戏开发前景: 最近企业对于Cocos2D-X开发人才的用人需求很大,而且所提供的薪资相当可观. 为满足广大向往游戏开发行业同学的需求,特推出适合新手的Cocos2D-X手游开发教程 ...

  9. Ppoj 1014 深搜

    这个题题意是给你价值1-6的珠宝个数输出能否平分为两份(如果平分为三分就不知道怎么做了……) 主要是用回溯DFS,但是要剪枝,对200取模……!!(很重要……) 代码…… #include <i ...

  10. gridView自己定义做时间排版

    公司有需求要做一个时间排版,原型例如以下 由于要用的gridView,曾经就是它的排版非常多,最看是想用一个checkbox搞定. 后来证实功能可以达到.可是排版是乱的.还是老老实实多写点吧(直接上代 ...