การอ้างอิงผ้าใบ HTML
คำอธิบาย
แท็ก HTML5 <canvas> ใช้เพื่อวาดกราฟิกได้ทันที ผ่านการเขียนสคริปต์ (โดยปกติคือ JavaScript)
อย่างไรก็ตาม องค์ประกอบ <canvas> ไม่มีความสามารถในการวาดเป็นของตัวเอง (เป็นเพียงคอนเทนเนอร์สำหรับกราฟิก) - คุณต้องใช้สคริปต์เพื่อวาดกราฟิกจริงๆ
เมธอด getContext() ส่งคืนอ็อบเจ็กต์ที่มีเมธอดและคุณสมบัติสำหรับการวาดภาพบนผืนผ้าใบ
ข้อมูลอ้างอิงนี้จะครอบคลุมคุณสมบัติและวิธีการของวัตถุ getContext("2d") ซึ่งสามารถใช้ในการวาดข้อความ เส้น กล่อง วงกลม และอื่นๆ บนผืนผ้าใบ
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนองค์ประกอบอย่างสมบูรณ์
| Element |
|
|
|
|
|
| <canvas> |
4.0 |
9.0 |
2.0 |
3.1 |
9.0 |
Internet Explorer 9, Firefox, Opera, Chrome และ Safari รองรับ <canvas> รวมถึงคุณสมบัติและวิธีการต่างๆ
หมายเหตุ: Internet Explorer 8 และเวอร์ชันก่อนหน้าไม่สนับสนุนองค์ประกอบ <canvas>
สี ลักษณะ และเงา
| Property |
Description |
| fillStyle |
Sets or returns the color, gradient, or pattern used to fill the drawing |
| strokeStyle |
Sets or returns the color, gradient, or pattern used for strokes |
| shadowColor |
Sets or returns the color to use for shadows |
| shadowBlur |
Sets or returns the blur level for shadows |
| shadowOffsetX |
Sets or returns the horizontal distance of the shadow from the shape |
| shadowOffsetY |
Sets or returns the vertical distance of the shadow from the shape |
ลักษณะเส้น
| Property |
Description |
| lineCap |
Sets or returns the style of the end caps for a line |
| lineJoin |
Sets or returns the type of corner created, when two lines meet |
| lineWidth |
Sets or returns the current line width |
| miterLimit |
Sets or returns the maximum miter length |
สี่เหลี่ยมผืนผ้า
เส้นทาง
| Method |
Description |
| fill() |
Fills the current drawing (path) |
| stroke() |
Actually draws the path you have defined |
| beginPath() |
Begins a path, or resets the current path |
| moveTo() |
Moves the path to the specified point in the canvas, without creating a
line |
| closePath() |
Creates a path from the current point back to the starting point |
| lineTo() |
Adds a new point and creates a line to that point from the last
specified point in the canvas |
| clip() |
Clips a region of any shape and size from the original canvas |
| quadraticCurveTo() |
Creates a quadratic Bézier curve |
| bezierCurveTo() |
Creates a cubic Bézier curve |
| arc() |
Creates an arc/curve (used to create circles, or parts of circles) |
| arcTo() |
Creates an arc/curve between two tangents |
| isPointInPath() |
Returns true if the specified point is in the current path, otherwise
false |
การแปลงร่าง
| Method |
Description |
| scale() |
Scales the current drawing bigger or smaller |
| rotate() |
Rotates the current drawing |
| translate() |
Remaps the (0,0) position on the canvas |
| transform() |
Replaces the current transformation matrix for the drawing |
| setTransform() |
Resets the current transform to the identity matrix. Then runs
transform() |
ข้อความ
| Property |
Description |
| font |
Sets or returns the current font properties for text content |
| textAlign |
Sets or returns the current alignment for text content |
| textBaseline |
Sets or returns the current text baseline used when drawing text |
| Method |
Description |
| fillText() |
Draws "filled" text on the canvas |
| strokeText() |
Draws text on the canvas (no fill) |
| measureText() |
Returns an object that contains the width of the specified text |
การวาดภาพ
| Method |
Description |
| drawImage() |
Draws an image, canvas, or video onto the canvas |
การจัดการพิกเซล
| Property |
Description |
| width |
Returns the width of an ImageData object |
| height |
Returns the height of an ImageData object |
| data |
Returns an object that contains image data of a specified ImageData
object |
| Method |
Description |
| createImageData() |
Creates a new, blank ImageData object |
| getImageData() |
Returns an ImageData object that copies the pixel data for the specified
rectangle on a canvas |
| putImageData() |
Puts the image data (from a specified ImageData object) back onto the
canvas |
คอมโพสิต
| Property |
Description |
| globalAlpha |
Sets or returns the current alpha or transparency value of the drawing |
|
globalCompositeOperation |
Sets or returns how a new image are drawn onto an existing image |
อื่น
| Method |
Description |
| save() |
Saves the state of the current context |
| restore() |
Returns previously saved path state and attributes |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
