ความคิดเห็น: ใน HTML5 ฉันคิดว่าสิ่งที่สำคัญที่สุดคือการแนะนำผ้าใบเพื่อให้เราสามารถวาดกราฟิกต่าง ๆ ในเว็บและ Canvas เป็นภาพวาดที่ใช้พิกเซล Canvas เป็นโหนด HTML เทียบเท่ากับ artboard เราต้องวาดด้วย JS
ใน HTML5 ฉันคิดว่าสิ่งที่สำคัญที่สุดคือการแนะนำผ้าใบเพื่อให้เราสามารถวาดกราฟิกต่าง ๆ ในเว็บ มันทำให้ผู้คนรู้สึกถึงการเบลอเล็กน้อยในเรื่องนี้ ในเว็บ HTML5 นอกจากนี้ยังมีภาพวาดที่ใช้ XML เช่น VML และ SVG Canvas เป็นภาพวาดที่ใช้พิกเซล Canvas เป็นโหนด HTML เทียบเท่ากับ artboard และเราต้องวาดใน JSดังนี้:
<canvas id = mycanvas width = 600 ความสูง = 300> เบราว์เซอร์ของคุณไม่รองรับคำจำกัดความ </anvas>
เราสามารถรับวัตถุ Canvas เป็น var c = document.getElementById (mycanvas); วิธีการใช้งาน JS ควรแสดงรายการดังนี้:
1: วาดวัตถุที่แสดงผล C.GetContext (2D) รับวัตถุการวาด 2D ไม่ว่าเราจะเรียกวัตถุกี่ครั้งวัตถุจะเป็นวัตถุเดียวกัน
2: วิธีการวาดภาพ:
clecrrect (ซ้าย, บน, ความกว้าง, ความสูง) ล้างพื้นที่สี่เหลี่ยมผืนผ้าที่กำหนดไว้
Fillrect (ซ้าย, บน, ความกว้าง, ความสูง) ดึงสี่เหลี่ยมผืนผ้าและเติมด้วย fillstyle
Filltext (text, x, y) วาดข้อความ;
Strokerect (ซ้าย, บน, ความกว้าง, ความสูง) วาดสี่เหลี่ยมและดึงขอบเขตด้วย strokestyle
เริ่มต้น (): เปิดภาพวาดของเส้นทางและรีเซ็ตเส้นทางไปยังสถานะเริ่มต้น;
closepath (): วาดเส้นทางเส้นทางปลายมันจะวาดช่วงเวลาปิดและเพิ่มเส้นโค้งปิดจากตำแหน่งเริ่มต้นไปยังพิกัดปัจจุบัน;
Moveto (x, y): ตั้งค่าพิกัดจริงของการวาดภาพ
Lineto (x, y); วาดเส้นตรงจากตำแหน่งปัจจุบันเป็น x, y
เติม (), stroke (), คลิป (): โครงร่างการเติมและขอบเขตสุดท้ายที่เสร็จสิ้นการวาดภาพพื้นที่คลิป
ส่วนโค้ง (): วาดส่วนโค้ง, ตำแหน่งกลาง, เรเดียนเริ่มต้นและการสิ้นสุดเรเดียนเพื่อระบุตำแหน่งและขนาดของส่วนโค้ง;
rect (): เส้นทางสี่เหลี่ยม;
drawimage (image img): วาดภาพ;
quadraticcurveto (): เส้นทาง spline สี่เหลี่ยมจัตุรัส, พารามิเตอร์สองจุดควบคุม;
Beziercurveto (): เส้นโค้ง Bezier, จุดควบคุมสามจุดของพารามิเตอร์;
createimagedata, getimagedata, putimagedata: เป็นข้อมูลพิกเซลในผ้าใบ Imagedata คือความกว้างความกว้างความสูงและข้อมูลที่ข้อมูลคือบันทึกของเม็ดสีของเราเป็น
Argb ดังนั้นความยาวของขนาดอาร์เรย์คือความกว้าง*ความสูง*4 และคำสั่งซื้อคือ RGBA ตามลำดับ GetImagedata คือการได้รับพิกเซลพื้นที่สี่เหลี่ยมและ Putimagedata คือการตั้งค่าพิกเซลพื้นที่สี่เหลี่ยม
…และอื่น ๆ !
3: ประสานงานการเปลี่ยนแปลง:
แปล (x, y): การแปลต้นกำเนิดย้ายไปยังพิกัด (x, y);
หมุน (a): การเปลี่ยนแปลงการหมุน, มุมการหมุนขององศา;
มาตราส่วน (x, y): การเปลี่ยนแปลงการปรับขนาด;
บันทึก (), restore (): ให้และสแต็ก, บันทึกและคืนสถานะการวาด, บันทึกผลักสถานะการวาดรูปปัจจุบันลงในสแต็กคืนสแต็กและคืนสถานะการวาด
…และอื่น ๆ !
โอเคมันสายเกินไป แนบรหัสทดสอบของฉัน:
<html>
<head>
</head>
<body>
<Canvas> เบราว์เซอร์ของคุณไม่รองรับ </anvas>
<script type = "text/javascript">
ความกว้าง var, ความสูง, บน, ซ้าย;
ความกว้าง = ความสูง = 100;
ด้านบน = ซ้าย = 5;
var x = 10;
var y = 10;
var c = document.getElementById ("Mycanvas");
var maxWidth = C.Width-5;
var maxheight = c.Height-5;
var cxt = c.getContext ("2d");
cxt.strokestyle = "#00f";
CXT.Strokerect (0,0, C.Width, C.Height);
var img = ภาพใหม่ ();
img.src = "1.gif";
var myInterval = null;
เริ่ม();
ฟังก์ชั่นรีเฟรช () {
CXT.ClearRect (ซ้าย, บน, ความกว้าง, ความสูง);
if ((ซ้าย+x)> (maxWidth-------Width) || left+x <0) {
x = -x;
-
if ((top+y)> (maxheight-height) || top+y <0) {
y = -y;
-
ซ้าย = ซ้าย+x;
top = top+y;
cxt.drawimage (img, ซ้าย, บน, ความกว้าง, ความสูง);
cxt.font = "20pt songyi";
cxt.filltext ("Breaking Wolf", ซ้าย, ด้านบน+25);
-
ฟังก์ชั่นเริ่มต้น () {
if (myInterval == null) {
myInterval = setInterval ("Refresh ()", 100);
-
-
ฟังก์ชันหยุด () {
ถ้า (myInterval! = null) {
ClearInterval (myInterval);
myInterval = null;
-
-
ฟังก์ชั่น inrectangle (x, y, rectx, recty, rwidth, rheight) {
return (x> = rectx && x <= rectx+rwidth) && (y> = recty && y <= recty+rheight)
-
c.onmouseover = ฟังก์ชั่น (e) {
ถ้า (inrectangle (e.clientx, e.clienty, ซ้าย, ด้านบน, ความกว้าง, ความสูง)) {
หยุด();
-
c.onmouseout = function (e) {
เริ่ม();
-
c.onmousemove = function (e) {
ถ้า (inrectangle (e.clientx, e.clienty, ซ้าย, ด้านบน, ความกว้าง, ความสูง)) {
ถ้า (myInterval! = null) {
หยุด();
-
}อื่น{
เริ่ม();
-
-
-
</script>
</body>
</html>