canvas繪圖套件繪製選擇權到期日損益圖

<style>

canvas{border:20px}

option{font-size:24px;background:pink;}

h1{background-image: linear-gradient(orange, blue);text-align:center;padding:10px;color:white;}</style>

<script>

function dashed(){

const c = document.getElementById("Options");

const ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(100,0);

ctx.lineTo(100,500);

ctx.strokeStyle="green";

ctx.setLineDash([10,10]);

ctx.lineWidth=1;

ctx.stroke();

ctx.beginPath();

ctx.moveTo(200,0);

ctx.lineTo(200,500);

ctx.strokeStyle="green";

ctx.setLineDash([10,10]);

ctx.lineWidth=1;

ctx.stroke();

}

function putBear(){

const c = document.getElementById("Options");

const ctx = c.getContext("2d");

ctx.reset();

ctx.beginPath(); //開始繪製

ctx.moveTo(100, 0);

ctx.lineTo(200, 100);

ctx.lineTo(300,100);

ctx.font = "24px Arial";

ctx.fillText("買入履約價120的賣權puts",300,50);

ctx.strokeStyle = "red";

ctx.lineWidth = 5;

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, 300);

ctx.lineTo(100, 200);

ctx.lineTo(300,200);

ctx.font = "24px Arial";

ctx.fillText("賣出履約價100的賣權puts",300,250);

ctx.strokeStyle = "blue";

ctx.lineWidth = 5;

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, 400);

ctx.lineTo(100, 400);

ctx.lineTo(200,500);

ctx.lineTo(300,500);

ctx.font = "24px Arial";

ctx.fillText("100至120賣權空頭Put Bear價差",300,450);

ctx.strokeStyle = "black";

ctx.lineWidth = 5;

ctx.stroke();}

  

function callBull(){

const c = document.getElementById("Options");

const ctx = c.getContext("2d");

ctx.reset();

ctx.beginPath();

ctx.moveTo(0, 100);

ctx.lineTo(100, 100);

ctx.lineTo(200,0);

ctx.font = "24px Arial";

ctx.fillText("買入履約價100的買權Call",300,50);

ctx.strokeStyle = "red";

ctx.lineWidth = 5;

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, 200);

ctx.lineTo(200, 200);

ctx.lineTo(300,300);

ctx.font = "24px Arial";

ctx.fillText("賣出履約價120的買權Call",300,250);

ctx.strokeStyle = "blue";

ctx.lineWidth = 5;

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, 500);

ctx.lineTo(100, 500);

ctx.lineTo(200,400);

ctx.lineTo(300,400);

ctx.font = "24px Arial";

ctx.fillText("100至120買權多頭Call Bear價差",300,450);

ctx.strokeStyle = "black";

ctx.lineWidth = 5;

ctx.stroke();}

function putBull(){

const c = document.getElementById("Options");

const ctx = c.getContext("2d");

ctx.reset();

ctx.beginPath(); //開始繪製

ctx.moveTo(0, 0);

ctx.lineTo(100, 100);

ctx.lineTo(200,100);

ctx.lineTo(300,100);

ctx.font = "24px Arial";

ctx.fillText("買入履約價100的賣權Put",300,50);

ctx.strokeStyle = "red";

ctx.lineWidth = 5;

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0,300);

ctx.lineTo(100, 300);

ctx.lineTo(200, 200);

ctx.lineTo(300,200);

ctx.font = "24px Arial";

ctx.fillText("賣出履約價120的賣權Put",300,250);

ctx.strokeStyle = "blue";

ctx.lineWidth = 5;

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, 500);

ctx.lineTo(100, 500);

ctx.lineTo(200,400);

ctx.lineTo(300,400);

ctx.font = "24px Arial";

ctx.fillText("100至120賣權多頭Put Bear價差",300,450);

ctx.strokeStyle = "black";

ctx.lineWidth = 5;

ctx.stroke();}

 

function callBear(){

const c = document.getElementById("Options");

const ctx = c.getContext("2d");

ctx.reset();

ctx.beginPath();

ctx.moveTo(0, 100);

ctx.lineTo(200, 100);

ctx.lineTo(300,0);

ctx.font = "24px Arial";

ctx.fillText("買入履約價120的買權Call",300,50);

ctx.strokeStyle = "red";

ctx.lineWidth = 5;

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, 300);

ctx.lineTo(100, 200);

ctx.lineTo(300,200);

ctx.font = "24px Arial";

ctx.fillText("賣出履約價100的買權Call",300,250);

ctx.strokeStyle = "blue";

ctx.lineWidth = 5;

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, 400);

ctx.lineTo(100, 400);

ctx.lineTo(200,500);

ctx.lineTo(300,500);

ctx.font = "24px Arial";

ctx.fillText("100至120買權空頭Call Bear價差",300,450);

ctx.strokeStyle = "black";

ctx.lineWidth = 5;

ctx.stroke();}

function clear()

{const c = document.getElementById("Options");

const ctx = c.getContext("2d")

ctx.reset();}

function Check (reply)

{

const element = document.getElementById('select');

 if ( reply == 'clear' ) clear();

 if ( reply == 'putbear' ){putBear(); dashed();};

 if ( reply == 'callbull' ){callBull();dashed();};

 if ( reply == 'putbull' ){putBull();dashed();};

 if ( reply == 'callbear' ){callBear();dashed();};

}

</script>

<h1>canvas繪圖套件繪製選擇權到期日損益圖</h1>

<label>選擇權價差交易策略</label>

<select id="select" onchange="Check(this.value)">

      <option value="clear">清空</option>

      <option value="putbear">賣權put空頭價差</option>

      <option value="callbull">買權call多頭價差</option>

      <option value="putbull">賣權put多頭價差</option>

      <option value="callbear">買權call空頭價差</option>

</select>

<canvas height="600" id="Options" width="700"></canvas>