20241028.CANVAS

選擇權到期日損益

if (條件) {成立執行;} else {不成立執行;};

以上的程式碼

<h3>選擇權到期日損益</h3>

<canvas id="Canvas210" width="900" height="500">

</canvas>

<script>

const canvas = document.getElementById("Canvas210");

const BuyPut = canvas.getContext("2d");

BuyPut.beginPath();

BuyPut.moveTo(0,0);

BuyPut.lineTo(200,200);

BuyPut.lineTo(400,200);

BuyPut.strokeStyle = "black";

BuyPut.lineWidth  = 2;

BuyPut.font = "32px 標楷體";

BuyPut.fillText("買入賣權Put",200,50);

BuyPut.stroke();

const SellPut = canvas.getContext("2d");

SellPut.beginPath();

SellPut.moveTo(0,500);

SellPut.lineTo(200,300);

SellPut.lineTo(400,300);

SellPut.strokeStyle = "black";

SellPut.lineWidth  = 2;

SellPut.stroke();

const BuyCall = canvas.getContext("2d");

BuyCall.beginPath();

BuyCall.moveTo(500,200);

BuyCall.lineTo(700,200);

BuyCall.lineTo(900,0);

BuyCall.strokeStyle = "black";

BuyCall.lineWidth  = 2;

BuyCall.stroke();

const SellCall = canvas.getContext("2d");

SellCall.beginPath();

SellCall.moveTo(500,300);

SellCall.lineTo(700,300);

SellCall.lineTo(900,500);

SellCall.strokeStyle = "black";

SellCall.lineWidth  = 2;

SellCall.stroke();

</script>

最後的結果:有按鈕BUTTON

<BUTTON ONCLICK='MY()' STYLE="BACKGROUND-COLOR:YELLOW;">說明</BUTTON>

<canvas id="Canvas210" width="900" height="500">

</canvas>

<script>

function MY(){

const canvas = document.getElementById("Canvas210");

const BuyPut = canvas.getContext("2d");

BuyPut.beginPath();

BuyPut.moveTo(0,0);

BuyPut.lineTo(200,200);

BuyPut.lineTo(400,200);

BuyPut.strokeStyle = "black";

BuyPut.lineWidth  = 2;

BuyPut.font = "24px 標楷體";

BuyPut.fillText("買入賣權Put,認售權證",200,50);

BuyPut.stroke();

const SellPut = canvas.getContext("2d");

SellPut.beginPath();

SellPut.moveTo(0,500);

SellPut.lineTo(200,300);

SellPut.lineTo(400,300);

SellPut.strokeStyle = "black";

SellPut.lineWidth  = 2;

SellPut.fillText("賣出賣權Put,認售權證",200,450);

SellPut.stroke();

const BuyCall = canvas.getContext("2d");

BuyCall.beginPath();

BuyCall.moveTo(500,200);

BuyCall.lineTo(700,200);

BuyCall.lineTo(900,0);

BuyCall.strokeStyle = "black";

BuyCall.lineWidth  = 2;

BuyCall.fillText("買入買權Call,認購權證",500,50);

BuyCall.stroke();

const SellCall = canvas.getContext("2d");

SellCall.beginPath();

SellCall.moveTo(500,300);

SellCall.lineTo(700,300);

SellCall.lineTo(900,500);

SellCall.strokeStyle = "black";

SellCall.lineWidth  = 2;

SellCall.fillText("賣出買權Call,認購權證",500,450);

SellCall.stroke();

}

</script>