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