下面例子為用canvas標籤畫多條直線
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>index_three</title><link href="css/style.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/index.js"/></script><body ><!-- 添加canvas標籤，並加上紅色邊框以便於在頁面上查看 --><canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">您的瀏覽器不支援canvas標籤。</canvas><script type="text/javascript">//擷取Canvas對象(畫布)var canvas = document.getElementById("myCanvas");//簡單地檢測當前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示法錯誤if(canvas.getContext){ //擷取對應的CanvasRenderingContext2D對象(畫筆) var ctx = canvas.getContext("2d");//線條的顏色ctx.strokeStyle="#FF9933";//線條的寬度像素ctx.lineWidth=10;//線條的兩關形狀ctx.lineCap="round"; //注意，Canvas的座標系是：Canvas畫布的左上方為原點(0,0)，向右為橫座標，向下為縱座標，單位是像素(px)。 //開始一個新的繪製路徑 ctx.beginPath(); //定義直線的起點座標為(10,10) ctx.moveTo(50, 50); //定義直線的終點座標為(50,10) ctx.lineTo(350, 250);ctx.moveTo(50, 240);ctx.lineTo(360, 60);ctx.moveTo(50, 200);ctx.lineTo(300, 40); //沿著座標點順序的路徑繪製直線 ctx.stroke(); //關閉當前的繪製路徑 ctx.closePath();}</script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
