劉任昌JavaScript物件object繪圖canvas繪製選擇權到期日損益

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

以上繪製選擇權損益程式碼

<style>

h1{background-color: purple; color:white; padding: 10px;}

.a{background-image: linear-gradient(white, yellow); font-size: 32px; line-height:1.5}

.b{background-image: linear-gradient(white, blue); color: white; font-size:30px}

</style>

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

<p>

<BUTTON ONCLICK="buy()">買入選擇權到期日損益</BUTTON>

<BUTTON ONCLICK="sell()">賣出選擇權到期日損益</BUTTON>

  </p>

<canvas height="150" id="BuyOptions" width="600"></canvas>

<canvas height="150" id="SellOptions" width="600"></canvas>

<script>

function buy(){  

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

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

ctx.strokeStyle = "green";

ctx.lineWidth = 5;

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(100, 100);

ctx.lineTo(200,100);

ctx.font = "16px Arial";

ctx.fillText("買入賣權puts的到期日損益",0,120);

ctx.moveTo(300, 100);

ctx.lineTo(400, 100);

ctx.lineTo(500, 0);

ctx.fillText("買入買權callss的到期日損益",300,120);

ctx.stroke();

}

function sell(){

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

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

ctx.strokeStyle = "blue";

ctx.lineWidth = 5;

ctx.beginPath();

ctx.moveTo(0, 110);

ctx.lineTo(100, 10);

ctx.lineTo(200,10);

ctx.font = "16px Arial";

ctx.fillText("賣出賣權puts的到期日損益",0,130);

ctx.moveTo(300, 10);

ctx.lineTo(400, 10);

ctx.lineTo(500, 110);

ctx.fillText("賣出買權callss的到期日損益",300,130)

ctx.stroke();//繪製

}

</script>

在HTML模式貼上甲班示範結果

identifier名稱，身分證id card

drums,guitar,vocals,bass,singer

五百狂,侯麗鷗,蔡依雯,林志玲,劉任昌

drums手: 五百狂
guitar手: 侯麗鷗
vocals手: 蔡依雯
bass手: 林志玲
singer手: 劉任昌

w3schools學物件