<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; outline: none; border: none; } #canvas{ margin: auto auto; width: 7rem; margin: .25rem 0 0 1.5rem; border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="1000" height="600"></canvas> </body> </html> <script type="text/javascript"> /** * rem 布局初始化 */ $('html').css('font-size', $(window).width()/10); /** * 獲取 canvas 畫布 * 獲取 canvas 繪圖上下文環境 */ var canvas = $('#canvas')[0]; var context = canvas.getContext('2d'); /** * canvas 線條繪制的 api ( 三條折現為例 ) */ context.lineWidth = 10; //線條的粗細 context.beginPath(); //開始一段全新的路徑( 清空之前的所有路徑點 ) context.moveTo(100, 100); //起點 context.lineTo(200, 200); //下一個點 context.lineTo(200, 300); //下一個點 context.strokeStyle = 'red'; //線條的顏色 context.stroke(); //畫線 context.beginPath(); //開始一段全新的路徑( 清空之前的所有路徑點 ) context.moveTo(150, 100); //起點 context.lineTo(250, 200); //下一個點 context.lineTo(250, 300); //下一個點 context.strokeStyle = 'blue'; //線條的顏色 context.stroke(); //畫線 context.beginPath(); //開始一段全新的路徑( 清空之前的所有路徑點 ) context.moveTo(200, 100); //起點 context.lineTo(300, 200); //下一個點 context.lineTo(300, 300); //下一個點 context.strokeStyle = 'yellow'; //線條的顏色 context.stroke(); //畫線 </script>
