Canvas createPattern() 方法

คู่มืออ้างอิง Canvas

คำนิยามและวิธีใช้

createPattern() วิธีที่ทำการสำเร็จการเรียกใช้element ที่กำหนดในทิศทางที่กำหนด.

element นี้สามารถเป็นรูปภาพ วีดีโอ หรือ element ของ <canvas> อื่นๆ。

element ที่ถูกสำเร็จการเรียกใช้สามารถใช้เพื่อวาด/ทำการเติมพื้นที่กล่องของตาราง กล่องเปลือกหรือเส้นของทิศทางตรงต่างๆ。

ตัวอย่าง

ภาพที่ใช้:

lamp

สำเร็จการเรียกใช้ภาพในทิศทางตรงนอนและตรงขึ้น:

โปรแกรมนี้ไม่สนับสนุนแท็ก HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

ลองทดสอบเอง

วิธีใช้

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

ค่าปรากฎการณ์

ปรากฎการณ์ รายละเอียด
image ระบุรูปภาพ หรือ element ของแคนวาสหรือวีดีโอที่ต้องการใช้。
repeat ค่าปริยาย.โมดูล์นี้จะทำการสำเร็จการเรียกใช้ทั้งทิศทางตรงนอนและตรงขึ้น.
repeat-x โมดูล์นี้เฉพาะการสำเร็จการเรียกใช้ภายในทิศทางตรงนอนเท่านั้น。
repeat-y โมด์นี้จะซ้ำในทิศทางตั้งฝั่งเท่านั้น
no-repeat โมด์นี้จะแสดงขึ้นมาเพียงครั้งเดียว (ไม่ซ้ำ)

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางนี้บอกเรื่องราวถึงรุ่นการใช้งานที่สนับสนุนคุณสมบัตินี้ครั้งแรก

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

หมายเหตุ:Internet Explorer 8 และรุ่นเก่าไม่สนับสนุนสิ่งที่เรียกว่า <canvas> อิเล็กทรอนิกส์

คู่มืออ้างอิง Canvas