ความคิดเห็น: บทความนี้จะแนะนำ HTML5 Canvas Canvas Fill and Stroke Effects โดยละเอียด บนพื้นฐานของผ้าใบวิธีการเติมพื้นผิวและการเติมพื้นผิวการเติมสีและจังหวะรหัสเฉพาะมีดังนี้ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน
แสดงให้เห็นถึงเอฟเฟกต์ข้อความ HTML5 Canvas Fill และ Stroke โดยขึ้นอยู่กับวิธีที่ Canvas ใช้การเติมพื้นผิวและจังหวะ1: การเติมสีและจังหวะ
การเติมสีสามารถทำได้ผ่านการเติมเต็มและสีจังหวะสามารถทำได้ผ่าน strokestyle ตัวอย่างง่ายๆ
ดังนี้:
// เติมข้อความและจังหวะ
ctx.font = '60pt calibri';
ctx.lineWidth = 3;
ctx.strokestyle = 'Green';
ctx.stroketext ('Hello World!', 20, 100);
ctx.fillstyle = 'สีแดง';
ctx.filltext ('Hello World!', 20, 100);
สอง: การเติมพื้นผิวและจังหวะ
HTML5 Canvas ยังรองรับการเติมพื้นผิว โดยการโหลดภาพพื้นผิวจากนั้นสร้างรูปแบบแปรง API สำหรับการสร้างรูปแบบพื้นผิวคือ ctx.createpattern (imageTexture ทำซ้ำ); พารามิเตอร์ที่สองรองรับค่าสี่ค่าคือทำซ้ำ -X, ทำซ้ำ, ซ้ำ, ทำซ้ำไม่ซ้ำหมายถึงพื้นผิวซ้ำหรือไม่ทำซ้ำตามแนวแกน x แกน y และทิศทาง XY ตามลำดับ รหัสสำหรับจังหวะพื้นผิวและการเติมมีดังนี้:
var woodfill = ctx.createpattern (imageTexture, "ทำซ้ำ");
ctx.strokestyle = woodfill;
ctx.stroketext ('Hello World!', 20, 200);
// เติมสี่เหลี่ยมผืนผ้า
ctx.fillstyle = woodfill;
ctx.fillrect (60, 240, 260, 440);
ภาพพื้นผิว:
สาม: ผลการดำเนินงาน
รหัส:
<! doctype html>
<html>
<head>
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> การสาธิตข้อความ Fill และ Stroke Text </title>
<link href = "default.css" />
<script>
var ctx = null; // บริบท 2D ตัวแปรส่วนกลาง
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 ("ไม่รองรับผืนผ้าใบโปรดติดตั้งเบราว์เซอร์ที่เข้ากันได้ HTML5");
กลับ;
-
// รับบริบท 2D ของผ้าใบและวาด rectangel
ctx = canvas.getContext ("2d");
ctx.fillstyle = "ดำ";
ctx.fillrect (0, 0, canvas.width, canvas.height);
// เติมข้อความและจังหวะ
ctx.font = '60pt calibri';
ctx.lineWidth = 3;
ctx.strokestyle = 'Green';
ctx.stroketext ('Hello World!', 20, 100);
ctx.fillstyle = 'สีแดง';
ctx.filltext ('Hello World!', 20, 100);
// เติมและจังหวะด้วยรูปแบบ
imageTexture = document.createElement ('img');
imageTexture.src = "../pattern.png";
imageTexture.onload = loaded ();
-
ฟังก์ชั่นโหลด () {
// ล่าช้าในการโหลดภาพ
settimeout (Texturefill, 1000/30);
-
ฟังก์ชั่น texturefill () {
// var woodfill = ctx.createpattern (imageTexture, "repeat-x");
// var woodfill = ctx.createpattern (imageTexture, "repeat-y");
// var woodfill = ctx.createpattern (imageTexture, "ไม่ทำซ้ำ");
var woodfill = ctx.createpattern (imageTexture, "ทำซ้ำ");
ctx.strokestyle = woodfill;
ctx.stroketext ('Hello World!', 20, 200);
// เติมสี่เหลี่ยมผืนผ้า
ctx.fillstyle = woodfill;
ctx.fillrect (60, 240, 260, 440);
-
</script>
</head>
<body>
<H1> การสาธิตข้อความ HTML5 HTML5 - โดยปลาที่มืดมน </H1>
<pre> เติมและจังหวะ </pre>
<div>
<Canvas> </sanvas>
</div>
</body>
</html>