<!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>
