ความคิดเห็น: HTML5 Canvas ให้ API แบบกราฟิกที่สามารถนำไปใช้งานได้ซึ่งคุณสามารถตระหนักถึงการแปลการหมุนการปรับขนาด ฯลฯ ให้ฉันแบ่งปันการใช้งานการแปลการหมุนและการอ้างอิงโดยเฉพาะกับคุณ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ
HTML5 Canvas ให้ API สำหรับการใช้การแปลกราฟการหมุนและการปรับขนาดแปล
แปลพิกัดแปล (x, y) หมายถึงการแปลพิกัด (0,0) เป็น (x, y) และพิกัดดั้งเดิม (0,0) กลายเป็น (-x, -y)
ภาพประกอบมีดังนี้:
จุดพิกัดของจุดพิกัดดั้งเดิมใด ๆ p (ox, oy) หลังจากการแปลคือ p (ox-x, oy-y) โดยที่จุด (x, y) คือการแปล
จุดประสานงานการแปล (x, y)
การสาธิตรหัส:
// แปลคือย้ายจุดเริ่มต้นไปยัง centera และกลับไปที่มุมซ้ายบนซ้าย
ฟังก์ชั่น RenderText (ความกว้างความสูงบริบท) {
บริบทการแปล (ความกว้าง / 2, ความสูง / 2); // พิกัดของจุดกึ่งกลางคือ (0, 0)
Context.font = "18px Arial";
Context.fillstyle = "Blue";
Context.fillText ("โปรดกด <Sc> เพื่อออกจากเกม", 5,50);
บริบทการแปล (-width/2, -height/2); // การกู้คืนการแปล (0,0) พิกัดคือมุมบนซ้ายบน
Context.fillText ("ฉันกลับไปด้านบน", 5,50);
-
มาตราส่วน
มาตราส่วน (a, b) หมายถึงการปรับขนาดวัตถุตามแกน xy เป็นขนาด*x, b*y ตามลำดับ เอฟเฟกต์แสดงในรูป:
// แปลสี่เหลี่ยมผืนผ้า
ฟังก์ชั่นวาด (บริบท) {
บริบทการแปล (200,200);
context.scale (2,2); // สเกลสองเท่าของขนาดดั้งเดิม
Context.strokestyle = "Green";
Context.BeginPath ();
Context.moveto (0,40);
Context.lineto (80,40);
Context.lineto (40,80);
บริบท closepath ();
Context.stroke ();
-
หมุน
หมุนมุมหมุน (math.pi/8)
พิกัด p (x, y) ก่อนการหมุนคือ p (rx, ry) หลังจากการหมุนที่สอดคล้องกันคือ
rx = x * cos (-angle)-y * sin (-angle);
ry = y * cos (-angle) + x * sin (-angle);
การหมุนของ 90 องศาสามารถทำให้ง่ายขึ้นเป็น:
rx = y;
ry = -x;
ทิศทางการหมุนเริ่มต้นในผืนผ้าใบตามเข็มนาฬิกา รหัสสาธิตมีดังนี้:
// new point.x = x * cos (-angle) -y * sin (-angle)
// new point.y = y * cos (-angle) +x * sin (-angle)
ฟังก์ชั่น renderrotatetext (บริบท) {
Context.font = "24px Arial";
บริบท fillstyle = "สีแดง";
Context.fillText ("ฉันอยู่ที่นี่ !!!", 5,50);
// หมุน -90 องศา
// context.rotate (-math.pi/2);
// context.fillstyle = "blue";
// context.filltext ("ฉันอยู่ที่นี่ !!!", -400,30);
// หมุน 90 องศา
บริบทการค้า (math.pi/2);
Context.fillstyle = "Blue";
Context.fillText ("ฉันอยู่ที่นี่ !!!", 350, -420);
console.log (math.sin (math.pi/2));
// rotae 90 องศาและวาด 10 บรรทัด
Context.fillstyle = "Green";
สำหรับ (var i = 0; i <4; i ++) {
var x = (i+1)*20;
var y = (i+1)*60;
var newx = y;
var newy = -x;
Context.fillrect (Newx, Newy, 200, 6);
-
-
การปฏิบัติตามปกติคือการใช้การหมุนและการแปลก่อนแปลพิกัด (0,0) ไปยังตำแหน่งกึ่งกลาง
แปล (ความกว้าง/2, ความสูง/2) จากนั้นหมุน (math.pi/2) เพื่อให้การหมุนเสร็จสมบูรณ์
ตัวอย่างรหัสมีดังนี้:
ฟังก์ชั่น saveandrestorecontext (บริบท) {
บริบท save ();
บริบทการแปล (200,200);
บริบทการค้า (math.pi/2);
Context.fillstyle = "Black";
Context.FillText ("บริบท 2D หมุนและแปล", 10, 10);
บริบท restore ();
Context.FillText ("บริบท 2D หมุนและแปล", 10, 10);
-
รหัส JavaScript ทั้งหมด:
var tempContext = null; // บริบท 2D ตัวแปรส่วนกลาง
window.onload = function () {
var canvas = document.getElementById ("เป้าหมาย");
Canvas.width = 450;
Canvas.height = 450;
if (! canvas.getContext) {
console.log ("ไม่รองรับผืนผ้าใบโปรดติดตั้งเบราว์เซอร์ที่เข้ากันได้ HTML5");
กลับ;
-
// รับบริบท 2D ของผ้าใบและวาดภาพ
tempContext = canvas.getContext ("2d");
// rendertext (canvas.width, canvas.height, tempcontext);
SaveAnDrestorecontext (tempContext);
// drawpath (tempContext);
-
// แปลคือย้ายจุดเริ่มต้นไปยัง centera และกลับไปที่มุมซ้ายบนซ้าย
ฟังก์ชั่น RenderText (ความกว้างความสูงบริบท) {
บริบทการแปล (ความกว้าง / 2, ความสูง / 2);
Context.font = "18px Arial";
Context.fillstyle = "Blue";
Context.fillText ("โปรดกด <Sc> เพื่อออกจากเกม", 5,50);
บริบทการแปล (-width/2, -height/2);
Context.fillText ("ฉันกลับไปด้านบน", 5,50);
-
// แปลสี่เหลี่ยมผืนผ้า
ฟังก์ชั่นวาด (บริบท) {
บริบทการแปล (200, 200);
Context.scale (2,2); // สเกลขนาดสองเท่าของรูปร่างดั้งเดิม
Context.strokestyle = "Green";
Context.BeginPath ();
Context.moveto (0, 40);
Context.lineto (80, 40);
Context.lineto (40, 80);
บริบท closepath ();
Context.stroke ();
-
// new point.x = x * cos (-angle)-y * sin (-angle)
// new point.y = y * cos (-angle) + x * sin (-angle)
ฟังก์ชั่น renderrotatetext (บริบท) {
Context.font = "24px Arial";
บริบท fillstyle = "สีแดง";
Context.fillText ("ฉันอยู่ที่นี่ !!!", 5,50);
// หมุน -90 องศา
// context.rotate (-math.pi/2);
// context.fillstyle = "blue";
// context.filltext ("ฉันอยู่ที่นี่ !!!", -400,30);
// หมุน 90 องศา
บริบทการค้า (math.pi/2);
Context.fillstyle = "Blue";
Context.fillText ("ฉันอยู่ที่นี่ !!!", 350, -420);
console.log (math.sin (math.pi/2));
// rotae 90 องศาและวาด 10 บรรทัด
Context.fillstyle = "Green";
สำหรับ (var i = 0; i <4; i ++) {
var x = (i+1)*20;
var y = (i+1)*60;
var newx = y;
var newy = -x;
Context.fillrect (Newx, Newy, 200, 6);
-
-
ฟังก์ชั่น saveandrestorecontext (บริบท) {
บริบท save ();
บริบทการแปล (200,200);
บริบทการค้า (math.pi/2);
Context.fillstyle = "Black";
Context.FillText ("บริบท 2D หมุนและแปล", 10, 10);
บริบท restore ();
Context.FillText ("บริบท 2D หมุนและแปล", 10, 10);
-