首頁 > 開發者 > JavaScript
html5 javascript canvas API 畫線，畫對角線
<!DOCTYPE html><html><title>html5 javascript canvas API 畫線，畫對角線</title><body><canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> <canvas id="diagonal_line" style="border:1px solid;" width="200" height="200"></canvas> <canvas id="diagonal_x" style="border:1px solid;" width="200" height="200"></canvas> <br>//帶實心邊框的canvas元素 <script> function drawDiagonalLine() { var canvas=document.getElementById('diagonal_line'); //擷取canvas對象 var context=canvas.getContext('2d'); //擷取canvas的上下文 context.beginPath(); context.moveTo(0,0); context.lineTo(140,70); context.stroke(); } drawDiagonalLine(); //畫X線 function drawX() { var canvas=document.getElementById('diagonal_x'); var context=canvas.getContext('2d'); context.beginPath(); //draw \ context.moveTo(0,0); context.lineTo(200,200); //draw / context.moveTo(0,200); context.lineTo(200,0); context.stroke(); } drawX(); //畫translate重定義座標原點 function drawTranslate() { var canvas=document.getElementById('diagonal_translate'); var context=canvas.getContext('2d'); context.save(); context.translate(70,140); context.beginPath(); context.moveTo(0,0); context.lineTo(70,-70); context.stroke(); context.resore(); } //drawTranslate(); window.addEventListener("load",drawTranslate,true);</script><canvas id="diagonal_translate" style="border:1px solid;" width="200" height="200"></canvas></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
