<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>簡單的直線回執</title> <style type="text/css"> div{margin-top: 10px;margin-left: 100px} </style> </head> <body> <div> <canvas id="canvas" width="800px" height="800px"></canvas> </div> <script type="text/javascript"> var dom=document.getElementById("canvas"); var ctx=dom.getContext('2d'); ctx.lineWidth=10; ctx.beginPath();//清楚所有的點 ctx.lineTo(100,200);//從上一個點開始到指定的點 ctx.lineTo(300,400); ctx.lineTo(100,600); ctx.strokeStyle="#c12121"; ctx.stroke(); ctx.beginPath(); ctx.lineWidth=10; ctx.moveTo(300,200);//從新開始另一個點 ctx.lineTo(500,400); ctx.lineTo(300,600); ctx.strokeStyle="#efe455"; ctx.stroke(); ctx.beginPath(); ctx.lineWidth=10; ctx.lineTo(500,200); ctx.lineTo(700,400); ctx.lineTo(500,600); ctx.strokeStyle="#a65912"; ctx.stroke(); </script> </body> </html>
canvas簡單直線代碼
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
2020年上半年數據庫系統工程師考試
基礎知識 ● 下列屬於 CPU 中算術邏輯單元的部件是（1）。 （1）A、程序計數器 B、加法器 C、指令寄存器 D、指令譯碼器 參考答案：（1）B ● 在 CPU 和主存之間設置