HTML5 SVG ທີ່ກາຍເອົາ
- ບົດການກ່ອນນີ້ HTML Input ປະກອງອັນສັນຍາບັນຍາ
- ອີກບົດການ HTML5 SVG
ເຄື່ອງ canvas ນຳໃຊ້ເພື່ອສະແດງພາບໃນເວັບໄຊ:
ຫຍັງວ່າ Canvas?
ເຄື່ອງ canvas HTML5 ນຳໃຊ້ JavaScript ເພື່ອສະແດງພາບໃນເວັບໄຊ:
ການຫົວສະແດງສະໝອງແມ່ນເປັນເຂດຕາມກາງ, ທ່ານສາມາດຄວບຄຸມຕົວຈິກທຸກພາກຂອງພາບ:
Canvas ມີວິທີການຂັບເຄື່ອງຫົວສະແດງຫຼາຍອັນ, ສະແດງສະໝອງ, ສະແດງຈິກ ແລະ ສ້າງພາບ:
ສ້າງເຄື່ອງ Canvas:
ເພີ່ມເຄື່ອງ canvas ໃຫ້ເປັນສະຖານທີ່ HTML5:
ຄົ້ນຫາ id, ວຸດທິດ ແລະ ຂະໜາດຂອງສິນຄໍາ:
<canvas id="myCanvas" width="200" height="100"></canvas>
ຂັບເຄື່ອງດ້ວຍ JavaScript:
ເຄື່ອງ canvas ບໍ່ມີຄວາມສາມາດຂາຍຫົວສະແດງ. ທຸກການປະພັນຕັດສິນທີ່ຕ້ອງຈັດຕັ້ງໃນ JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
JavaScript ນຳໃຊ້ id ເພື່ອຊອກຫາເຄື່ອງ canvas:
var c=document.getElementById("myCanvas");
ຫຼັງການນັ້ນ, ສ້າງໂອກາດ context:
var cxt=c.getContext("2d");
ໂອກາດ getContext("2d") ມີຢ່າງໄວ້ຂອງບັນດາບັນດາ HTML5 ທີ່ມີບາງການສະແດງຕາມວົງວຽນ, ວົງວຽນ, ວົງວຽນ, ບັນດາສະແດງມົນລະບາຍ ແລະ ການເພີ່ມສິນລະບາຍ:
ຫຼັງການຂຽນສອງປະໂຫຍດທີ່ຈະຂຽນວົງວຽນສີສີຂຽວ:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
ມາດຕະການ fillStyle ຈະຂຽນສີສີຂຽວ, ມາດຕະການ fillRect ຈະສະແດງຂະໜາດ, ທີ່ຕັ້ງ ແລະ ຂະໜາດ:
ທີ່ຈະເຂົ້າໃຈຄຸນພາບ:
ຫຼັກການ fillRect ມີພາກສານ (0,0,150,75).
ຄວາມໝາຍ: ທີ່ຈະຂຽນວົງວຽນ 150x75 ຕາມທີ່ຕັ້ງຈາກປະຕູສັ້ນ (0,0).
ອີງຕາມສັນຍາລະບາກ, ສະໝອງ X ແລະ Y ຂອງແຜ່ນສະໝອງສະແດງຈະນຳໃຊ້ເພື່ອຕັ້ງການຕັ້ງສິ່ງສະແດງໃນແຜ່ນສະໝອງ:
ບັນດາຄົນຄືນ Canvas ອີກ:
ບັນດາຄົນຄືນຫຼັງການຂຽນໃນສັບສານ canvas:
ຄົນຄືນ - ສາຍ
ທີ່ຈະຂຽນສາຍຈາກຂະໜາດເລີ່ມທີ່ຫາທີ່ຈົບ:
JavaScript 代码：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
canvas 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
ຄົນຄືນ - ວົງວຽນ
ທີ່ຈະຂຽນວົງວຽນຈາກຂະໜາດ, ສີ ແລະ ທີ່ຕັ້ງ:
JavaScript 代码：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
canvas 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
ຄົນຄືນ - ສະຫຼາກຫຼັງການ
ນຳໃຊ້ສີທີ່ເຈົ້ານຳໃຊ້ເພື່ອຂຽນຫຼັງການສະຫຼາກຫຼັງການ:
JavaScript 代码：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
canvas 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
实例 - 图像
把一幅图像放置到画布上：
JavaScript 代码：
canvas 元素：
HTML Canvas ການສອນ
ສຳລັບການຮຽນຮູ້ຫຼາຍກ່ຽວກັບການແຕ້ມ, ກະລຸນາເຂົ້າມາທີ່ HTML Canvas ການສອນ.
- ບົດການກ່ອນນີ້ HTML Input ປະກອງອັນສັນຍາບັນຍາ
- ອີກບົດການ HTML5 SVG
