API Canvas
- ບ່ອນໜ້າຫນ້າທີ່ເວີກກັນ HTML Style
- ບ່ອນໜ້າຫນ້າທີ່ຕໍ່ໄປ API Console
ປະກອບ <canvas> ສະແນວຫຼັກບັນທຶກພາບຂອງບາງເວັບ HTML.
API Canvas ສາມາດອະນຸຍາດ JavaScript ຂຽນຮູບຮ່າງໃນກະເບົາ.
API Canvas ສາມາດຂຽນຮູບຮ່າງ, ສາຍ, ວົງ, ບໍລິເວນ, ຂໍ້ຄວາມ, ແລະ ຮູບພາບ, ພ້ອມດ້ວຍສີ, ການສະພາບ, ຄວາມປະກາດ, ແລະ ການດຳເນີນກັບພາສີຈັກກະພິບ.
ເພີ່ມ Canvas ໃຫ້ HTML
ທ່ານສາມາດໃຊ້ຕົວແຜງ <canvas> ເພື່ອເພີ່ມປະກອບ canvas ໃນທີ່ໃດກໍ່ໄດ້ໃນບາງເວັບ HTML:
ຕົວຢ່າງຂອງການສ້າງ.
<canvas id="myCanvas" width="300" height="150"></canvas>
ວິທີການເຂົ້າເຖິງປະກອບ Canvas
ທ່ານສາມາດໃຊ້ກົນລະບົບ HTML DOM ວິທີການ getElementById() ເພື່ອເຂົ້າເຖິງປະກອບ <canvas> ຢ່າງດັ່ງກ່າວ:
const myCanvas = document.getElementById("myCanvas");
ຖ້າທ່ານຕ້ອງທ້າທາຍດີຕະລິກັນໃນແຜ່ນຈັດວົງວອກ, ທ່ານຕ້ອງສ້າງອົງການ 2D Context:
const ctx = myCanvas.getContext("2d");
ຄວາມຄິດ.
ສິ່ງ <canvas> HTML ບໍ່ມີພາບທີ່ຂຽນວົງວອກ.
ທ່ານຕ້ອງນຳໃຊ້ JavaScript ເພື່ອທ້າທາຍດີຕະລິກັນພາບຈຳນວນໃດກໍ່ຕາມ.
ວິທີການ getContext() ກຳລັງບັນທຶກມາປະກັບອົງການທີ່ມີອາກາດທີ່ຂຽນວົງວອກ (ວິທີ).
ທ້າທາຍດີຕະລິກັນໃນແຜ່ນຈັດວົງວອກ.
ຫຼັງຈາກທີ່ທ່ານໄດ້ສ້າງສິ່ງຂອງ 2D Context, ທ່ານສາມາດທ້າທາຍດີຕະລິກັນໃນແຜ່ນຈັດວົງວອກໄດ້.
ວິທີການ fillRect() ໃຫ້ພາບຂອງຮູບຂຽວທີ່ສະຫລວດສີສີນອກ, ທີ່ພະບັງຢູ່ທີ່ 20,20. ຮູບຂຽວມີວັດທະນະບູລາວີ 150 ປະຕູ ແລະຫຼາຍ 100 ປະຕູ:
ຕົວຢ່າງຂອງການສ້າງ.
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);
ການນຳໃຊ້ສະຫລວດ.
fillStyle ປະສົງການຕັດສິນສະຫລວດກະວີສະຫລວດຂອງສິ່ງສຳລັບການຍົກຂຶ້ນ.
ຕົວຢ່າງຂອງການສ້າງ.
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
ທ່ານສາມາດນຳໃຊ້ວິທີການ document.createElement() ເພື່ອສ້າງສິ່ງໃໝ່ <canvas> ແລະ ສຳລັບການເພີ່ມສິ່ງມາໃນ HTML ບຳລຸງໄດ້:
ຕົວຢ່າງຂອງການສ້າງ.
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
路径
ວິທີການທີ່ຫນັງຢູ່ສຳລັບການຂຽນໃນແຜ່ນຈັດວົງວອກແມ່ນ:
- ການເລີ່ມວົງ - beginPath()
- ການຍ້າຍໄປຫາພະບັງ - moveTo()
- ການຂຽນວົງວອກໃນວົງ - lineTo()
- ການຂຽນວົງວອກ - stroke()
ຕົວຢ່າງຂອງການສ້າງ.
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();
ສະຫລວດ, ຮູບພາບ ແລະ ສະຫລວດກະວີສະຫລວດ.
| ປະສົມ | ການອະທິບາຍ |
|---|---|
| fillStyle | ການຕັດສິນສະຖານທີ່ສະຫລວດກະວີສະຫລວດ, ສະຫລວດອາກາດ ຫຼື ຮູບພາບ ສຳລັບການຍົກຂຶ້ນ. |
| strokeStyle | ການຕັດສິນສະຖານທີ່ສະຫລວດກະວີສະຫລວດ, ສະຫລວດອາກາດ ຫຼື ຮູບພາບ. |
| shadowColor | ການຕັດສິນສະຖານທີ່ສະຫລວດກະວີສະຫລວດ. |
| shadowBlur | ການຕັດສິນສະຖານທີ່ສະຫລວດກະວີສະຫລວດ. |
| shadowOffsetX | 设置或返回阴影到形状的水平距离。 |
| shadowOffsetY | 设置或返回阴影到形状的垂直距离。 |
| ກົນລະຍຸດ | ການອະທິບາຍ |
|---|---|
| createLinearGradient() | 创建线性渐变（用于画布内容）。 |
| createPattern() | 在指定方向重复指定的元素。 |
| createRadialGradient() | 创建径向/圆形渐变（用于画布内容）。 |
| addColorStop() | 规定渐变对象中的颜色和停止位置。 |
线条样式
| ປະສົມ | ການອະທິບາຍ |
|---|---|
| lineCap | 设置或返回线的端盖样式。 |
| lineJoin | 设置或返回两条线相交时创建的角的类型。 |
| lineWidth | 设置或返回当前线宽。 |
| miterLimit | 设置或返回最大斜接长度。 |
矩形
| ກົນລະຍຸດ | ການອະທິບາຍ |
|---|---|
| rect() | 创建矩形。 |
| fillRect() | 绘制“填充的”矩形。 |
| strokeRect() | 绘制矩形（无填充）。 |
| clearRect() | 清除给定矩形内的指定像素。 |
路径
| ກົນລະຍຸດ | ການອະທິບາຍ |
|---|---|
| fill() | 填充当前图形（路径）。 |
| stroke() | 实际上绘制您定义的路径。 |
| beginPath() | 开始路径，或重置当前路径。 |
| moveTo() | 将路径移动到画布中的指定点，而不创建线。 |
| closePath() | 创建从当前点返回起点的路径。 |
| lineTo() | 添加一个新点并创建一条从该点到画布中最后一个指定点的线。 |
| clip() | 从原始画布中剪裁任意形状和大小的区域。 |
| quadraticCurveTo() | 创建二次贝塞尔曲线。 |
| bezierCurveTo() | 创建三次贝塞尔曲线。 |
| arc() | 创建圆弧/曲线（用于创建圆或圆的一部分）。 |
| arcTo() | 在两条切线之间创建圆弧/曲线。 |
| isPointInPath() | 如果指定点在当前路径中，则返回 true，否则返回 false。 |
转换
| ກົນລະຍຸດ | ການອະທິບາຍ |
|---|---|
| scale() | 放大或缩小当前图形。 |
| rotate() | 旋转当前图形。 |
| translate() | 重新映射画布上的 (0,0) 位置。 |
| transform() | 替换绘图的当前转换矩阵。 |
| setTransform() | 将当前转换重置为单位矩阵。然后运行 transform(). |
ຂໍ້ຄວາມ
| ປະສົມ | ການອະທິບາຍ |
|---|---|
| font | ການຕັ້ງຕອນຫຼືກັບຄືນວິທີການຈັດຄູ່ຂອງຂໍ້ຄວາມທີ່ກຳລັງຈະນຳໃຊ້。 |
| textAlign | ການຕັ້ງຕອນຫຼືກັບຄືນວິທີການຈັດຄູ່ຂອງຂໍ້ຄວາມທີ່ກຳລັງຈະນຳໃຊ້。 |
| textBaseline | 设置或返回绘制文本时使用的当前文本基线。 |
| ກົນລະຍຸດ | ການອະທິບາຍ |
|---|---|
| fillText() | 在画布上绘制“填充”文本。 |
| strokeText() | 在画布上绘制文本（无填充）。 |
| measureText() | ກັບຄືນໂອກາດທີ່ມີຄວາມວົງຂອງຄຳຂຽນ. |
ການຂຽນພາບ
| ກົນລະຍຸດ | ການອະທິບາຍ |
|---|---|
| drawImage() | ການຂຽນພາບຂອງບັນຊີ, ບັນຊີບັນຊີຫນັງ, ຫຼືວິດີໂອ. |
ການປະຕິບັດຕາມລູກສະເພາະ
| ປະສົມ | ການອະທິບາຍ |
|---|---|
| width | ກັບຄືນຄວາມວົງຂອງໂອກາດ ImageData. |
| height | ກັບຄືນຄວາມສູງຂອງໂອກາດ ImageData. |
| data | ກັບຄືນໂອກາດທີ່ມີຂໍ້ມູນພາບຂອງໂອກາດ ImageData. |
| ກົນລະຍຸດ | ການອະທິບາຍ |
|---|---|
| createImageData() | ການສ້າງໂອກາດ ImageData ທີ່ບໍ່ມີຄວາມລັບ. |
| getImageData() | ກັບຄືນໂອກາດ ImageData ທີ່ສະເພາະກັບການທີ່ຈະມາຈາກການຕິດຕັ້ງພາບຂອງພາບມາຈາກກາງບັນຊີ. |
| putImageData() | ການສົ່ງພາບຂໍ້ມູນພາບມາຈາກໂອກາດ ImageData ສະເພາະກັບການຈະມາຈາກສະໜາມພາບ. |
ການປະສົມ
| ປະສົມ | ການອະທິບາຍ |
|---|---|
| globalAlpha | ການຕິດຕັ້ງ ຫຼື ກັບຄືນສະຖານະການ alpha ຫຼື ຄວາມປະກາດຂອງການຂຽນ. |
| globalCompositeOperation | ການຕິດຕັ້ງ ຫຼື ກັບຄືນສະຖານະການທີ່ຈະຈະຕິດຕັ້ງພາບໃຫມ່ໃສ່ພາບເປັນທີ່ຈະຕິດຕັ້ງ. |
ອື່ນໆ
| ກົນລະຍຸດ | ການອະທິບາຍ |
|---|---|
| save() | ຮັກສາສະຖານະການຂັ້ນຕົ້ນຂອງສະຖານະການ. |
| restore() | ກັບຄືນສະຖານະການທີ່ຖືກຮັກສາຂອງສະຖານະການຂັ້ນຕົ້ນ ແລະ ສະຖານະການ. |
| createEvent() | |
| getContext() | |
| toDataURL() |
ບັນດາຫນ້າເວັບທີ່ກ່ຽວຂ້ອງ
ການສອນ HTML:Canvas HTML5
ການສອນ HTML:ການສອນ HTML Canvas
ປືກສາ HTML:HTML <canvas> ອັບໜີງ
- ບ່ອນໜ້າຫນ້າທີ່ເວີກກັນ HTML Style
- ບ່ອນໜ້າຫນ້າທີ່ຕໍ່ໄປ API Console
