html中linecap示例

来源:互联网 发布:和晟实业投资 知乎 编辑:程序博客网 时间:2024/06/08 12:27
<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title><script>function draw(id){var context=document.getElementById('canvas').getContext('2d');var linecap=['butt','round','square'];context.strokeStyle='#09f';context.beginPath();context.moveTo(10,10);context.lineTo(140,10);context.moveTo(10,140);context.lineTo(140,140);context.stroke();context.strokeStyle='black';for(var i=0;i<linecap.length;i++){context.linewidth=15;context.linecap=linecap[i];context.beginPath();context.moveTo(25+i*50,10);context.lineTo(25+i*50,140);context.stroke();}}</script></head><body onload="draw('canvas');"><h1>linecap</h1><canvas id="canvas" width="400" height="300"/></body></html>