<!DOCTYPE html> <html lang=‘zh-cn‘> <head> <title>Insert you title</title> <meta name=‘description‘ content=‘this is my page‘> <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script> <style type=‘text/css‘> html,body,canvas { margin: 0; padding: 0; } html { background: #999; } canvas { background: #FFF; display: block; margin: 75px auto; border-radius: 2px; } </style> <script type="text/javascript"> $( function(){ var oCan = $( ‘#can‘ ).get( 0 ).getContext( ‘2d‘ ); oCan.beginPath(); oCan.strokeStyle = ‘#F0F‘; oCan.lineWidth = 10; oCan.moveTo( 250 , 175 ); oCan.lineTo( 445 , 345 ); oCan.lineTo( 45 , 135 ); oCan.closePath(); oCan.lineJoin = ‘round‘; /* 设置线之间的连接点的形状 miter (默认) round (圆形) bevel (斜角) 但是无法作用于自动闭合的点*/ oCan.stroke(); oCan.beginPath(); oCan.strokeStyle = ‘#F0F‘; oCan.lineWidth = 10; oCan.moveTo( 50 , 75 ); oCan.lineTo( 125 , 95 ); oCan.lineTo( 45 , 35 ); oCan.lineCap = ‘round‘; /* 设置端点的样式 butt (默认) round (圆形) square (高度多出线宽的一半) 作用于 " 线 " 并且要在此属性之后才能调用 closePath() 有效 */ oCan.stroke(); oCan.closePath(); } ); </script> </head> <body> <canvas width=‘500‘ height=‘350‘ id=‘can‘>请您更换浏览器...</canvas> </body> </html>
时间: 2024-10-09 02:53:52