HTML5Canvas填充與描邊(FillAndStroke)-創(chuàng)新互聯(lián)

HTML5 Canvas 填充與描邊(Fill And Stroke)

創(chuàng)新互聯(lián)公司是一家專業(yè)提供桐鄉(xiāng)企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為桐鄉(xiāng)眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

演示HTML5 Canvas Fill 與Stroke文字效果，基于Canvas如何實

現(xiàn)紋理填充與描邊。

一：顏色填充與描邊

顏色填充可以通過fillStyle來實現(xiàn)，描邊顏色可以通過strokeStyle來實現(xiàn)。簡單示例

如下：

// 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還支持紋理填充，通過加載一張紋理圖像，然后創(chuàng)建畫筆模式，創(chuàng)建

紋理模式的API為ctx.createPattern(imageTexture,"repeat");第二參數(shù)支持四個

值，分別為”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);

紋理圖片：

HTML5 Canvas 填充與描邊(Fill And Stroke)

三：運行效果

HTML5 Canvas 填充與描邊(Fill And Stroke)

代碼：

<!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> 	<h2>HTML5 Canvas Text Demo - By Gloomy Fish</h2> 	<pre>Fill And Stroke</pre> 	<div id="my_painter"> 		<canvas id="text_canvas"></canvas> 	</div> </body> </html>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

名稱欄目：HTML5Canvas填充與描邊(FillAndStroke)-創(chuàng)新互聯(lián)
標題URL：http://m.kartarina.com/article22/ccipcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、企業(yè)建站、企業(yè)網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、網(wǎng)站改版、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容