<!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 填充的圖形 ( 一個箭頭為例 ) */ context.beginPath(); context.lineTo(200, 200); context.lineTo(500, 200); context.lineTo(500, 100); context.lineTo(700, 250); context.lineTo(500, 400); context.lineTo(500, 300); context.lineTo(200, 300); //context.lineTo(200, 200); //當用這種方式封閉的時候, 當線條的粗細較寬時, 會出現瑕疵 context.closePath(); //封閉一個圖形, 沒有瑕疵, 推薦使用 context.fillStyle = 'yellow'; //填充封閉圖形的顏色, context.fill(); //填充圖形 ( 后繪制的圖形會覆蓋前面的圖形, 繪制時注意先后順序 ) context.lineWidth = 5; context.stroke(); //填充圖形 ( 后繪制的圖形會覆蓋前面的圖形, 繪制時注意先后順序 ) </script>
