2025年12月衍生性金融商品作業

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>

留言

  1. George2025年12月5日 下午6:30

    財金系，我一定交網頁相關，尤其是canvas和已開發國家小學用的scrarch，他們都是用網路語言JavaScript寫的。最普遍的工具用在學生的學習，這才有學習效果，過去幾年資管系辦的那些研習，教學用不上，對老師的幫助也沒有。我不去參加這些研習，是不能浪費時間在為學生準備有用的課程，不懂，卻又不能讓人覺得沒在做事，就是在瞎忙！

    回覆刪除
  2. George2025年12月10日 下午6:18

    https://lin-cheng-yu.blogspot.com/2025/12/blog-post.html

    回覆刪除
  3. 方逵 2025年12月10日 晚上7:11

    https://whitexd.blogspot.com/2025/12/canvasborder20px-optionfont.html?m=1

    回覆刪除
  4. George2025年12月10日 晚上7:21

    https://lijiauyn.blogspot.com/2025/12/blog-post.html

    回覆刪除
  5. 蕭瑜HTML_CSS_Javascript_Java_Python2025年12月10日 晚上7:33

    https://hsiao-yu0711.blogspot.com/2025/12/blog-post_10.html

    回覆刪除
  6. 陳冠丞2025年12月10日 晚上7:37

    https://s10655075.blogspot.com/2025/12/blog-post.html

    回覆刪除
  7. D11236102吳敏瑄2025年12月10日 晚上7:50

    https://xi07.blogspot.com/2025/12/blog-post.html

    回覆刪除
  8. D112171302025年12月10日 晚上7:51

    https://d11217130.blogspot.com/2025/12/d11217130.html?m=1

    回覆刪除
  9. 李昀芯2025年12月10日 晚上7:52

    https://yunn-xin.blogspot.com/2025/12/blog-post_10.html

    回覆刪除
  10. D11236110張月辰2025年12月10日 晚上7:55

    https://yuechen613.blogspot.com/2025/12/blog-post.html

    回覆刪除
  11. 龍星岑HTML_CSS_Javascript_java_Python2025年12月10日 晚上8:53

    https://the-most-great-hsing-tsen.blogspot.com/2025/12/canvasborder20px-optionfont.html

    回覆刪除
  12. 劉庭妤HTML_CSS_Javascript_Java_Python2025年12月10日 晚上8:57

    https://michelle814.blogspot.com/2025/12/blog-post.html

    回覆刪除
  13. HUANG-PEI-KAI2025年12月10日 晚上9:29

    https://www.blogger.com/blog/post/edit/preview/1173902976928833486/8816739683597271270

    回覆刪除
  14. 林昱辰2025年12月10日 晚上9:36

    https://the-most-great.blogspot.com/2025/12/blog-post.html

    回覆刪除
  15. 吳易恩HTML_CSS_Javascript_Java_Python2025年12月10日 晚上10:10

    https://yrye4312311.blogspot.com/2025/12/d11217107.html

    回覆刪除
  16. 林逸民HTML_CSS_Javascript_Java_Python2025年12月10日 晚上10:10

    https://yiminglinn.blogspot.com/2025/12/blog-post.html

    回覆刪除
  17. 陳宥凱HTML_CSS_Javascript_Java_Python2025年12月10日 晚上10:12

    https://chenyoukai.blogspot.com/2025/12/blog-post.html

    回覆刪除
  18. 廖翊宏HTML_CSS_Javascript_Java_Python2025年12月10日 晚上10:15

    https://the-most-great-tony11.blogspot.com/2025/12/blog-post.html

    回覆刪除
  19. 洪志坤 HTML_CSS_Javascript_Java_Python2025年12月10日 晚上10:17

    https://honghikun.blogspot.com/2025/12/d11217129.html

    回覆刪除
  20. 謝庭維2025年12月10日 晚上10:28

    https://56788888.blogspot.com/2025/12/canvas.html

    回覆刪除
  21. xuan2025年12月17日 清晨5:18

    https://xuan0729.blogspot.com/2025/12/blog-post.html

    回覆刪除
  22. 程式設計2025年12月17日 下午6:54

    https://zhengyuzhe.blogspot.com/2025/12/blog-post.html?m=1

    回覆刪除
  23. 范雅惠2025年12月17日 下午6:54

    https://draft.blogger.com/u/2/blog/post/edit/preview/1538851669311843874/78420916459695192

    回覆刪除
  24. 黃詩閔HTML_ CSS_ Javascript Java_Pythonl2025年12月17日 下午6:58

    https://ehiwkewh.blogspot.com/2025/12/blog-post_17.html?m=1

    回覆刪除
  25. 范智凱學會html與css與嵌入影片等2025年12月17日 晚上7:23

    https://themostgreatteacher.blogspot.com/2025/12/blog-post.html

    回覆刪除
  26. 林孟儒2025年12月17日 晚上7:30

    https://rubylinnn.blogspot.com/2025/12/blog-post.html

    回覆刪除
  27. 蘇柏丞2025年12月17日 晚上9:34

    作者已經移除這則留言。

    回覆刪除
  28. 蘇柏丞2025年12月17日 晚上9:35

    https://www.blogger.com/u/2/blog/post/edit/7887220793710142577/3805035506061689940

    回覆刪除
  29. 程式設計2025年12月26日 上午8:51

    作者已經移除這則留言。

    回覆刪除
  30. 程式設計2025年12月26日 上午9:00

    陳麗慧https://huilii.blogspot.com/2025/12/canvasborder20px-optionfont.html

    回覆刪除

張貼留言

這個網誌中的熱門文章

金三甲期末考重要題庫與額未加分作業

圖片
尤婕羽2025年第三次期貨交易理論與實務 答 A B C D 以下有關期貨交易者類別所須繳交 保證金 額度的比較，何者為真？ 投機＞價差交易＞避險 投機＞避險＞價差交易 價差交易＞避險＞投機 避險＞價差交易＞投機 答 A B C D 停損限價（Stop Limit）委託 賣單 ，其委託價與市價之關係為： 委託價高於市價 委託價低於市價 沒有限制 依平倉或建立新部位而定 答 A B C D 6月1日計算香港交易所MSCI臺指期貨之未平倉量為10,000口，下列敘述何者為正確？甲.表示買賣雙方各有5,000口契約尚未平倉；乙.表示買賣雙方各有10,000口契約尚未平倉 甲 乙 選項(A)(B)皆是 選項(A)(B)皆非 答 A B C D 目前客戶的 保證金 淨值為US$60,000，而其未平倉部位所需 原始保證金 為US$48,000， 維持保證金 為US$36,000，則若客戶欲出金，其最高可提領金額為： US$60,000 US$12,000 US$24,000 0 答 A B C D 瑞郎期貨每口所須 原始期貨保證金 為US$1,800，若客戶於0.8754買進，在0.8790平倉，請問客戶的投資報酬率為何？（瑞郎期貨契約值125,000瑞郎） 5.33% 5.30% 15% 25% 答 A B C D 下列敘述哪一項是正確的？ 期貨到期時基差為負值 期貨到期時基差為正值 期貨到期時基差為零 視當時市場狀況決定 答 A B C D 券商若發行指數型認購權證（Call Warrant），可在指數上漲時如何操作指數期貨避險？ 賣出指數期貨 視認購權證之價格變化來決定，買或賣指數期貨 買進指數期貨 無法以指數期貨避險 答 A B C D 最小風險避險比例（最佳避險比例）的估計式為h，例如h＝－0.5，試問「－」符號之意義為何？ 表示期貨部位與現貨部位相反 表示賣空期貨契約 表示期貨部位將產生虧損 表示買進期貨契約 答 A B C D 智利礦商賣出銅期貨避險，何者會造成避險的不完全？ 當銅現貨與銅期貨的相關係數為1時 避險後，基差沒有變動 期貨契約規格固定 若可以買到所需要的銅期貨數量 答 A B C D 某廠商必須進口小麥，為了避險買進了10口小麥期貨...
閱讀完整內容

空頭價差多頭價差跨式勒式

圖片
空頭價差、多頭價差、跨式、勒式 選擇權價差交易策略 清空 賣權put空頭價差 買權call多頭價差 賣權put多頭價差 買權call空頭價差 下跨(買跨)付出權利金 上跨(賣跨)收取權利金付出保證金 買進勒式付出權利金 賣出勒式收取權利金付出保證金 選擇權理論價格:維基百科 在HTML模式貼上以上程式碼在留言區留下網址 <style> canvas{border:20px} option{font-size:24px;background:yellow;} h1{background-image: linear-gradient(black, red);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.li...
閱讀完整內容