首页 > 代码库 > 圆角锯齿

圆角锯齿

<!doctype html>     <html lang="en">         <head>             <meta charset="UTF-8">             <title>锯齿</title>             <script type="text/javascript">             window.addEventListener("load", eventWindowLoaded, false);             function eventWindowLoaded(){                 var x,y;                 var theCanvas = document.getElementById("canvas");                 var context = theCanvas.getContext("2d");                 context.strokeStyle = #CB9A61;                  context.lineWidth=10;                 context.strokeRect(10,  10, theCanvas.width-20, theCanvas.height-20);                 context.fillStyle = "#FFFFFF";                 for(x=5;x<=canvas.width;x=x+10){                     context.beginPath();                     context.arc(x,5,5,0,Math.PI*2,true);                     context.arc(x,canvas.height-5,5,0,Math.PI*2,true);                     context.closePath();                     context.fill();                 }                 for(y=5;y<=canvas.height;y=y+10){                     context.beginPath();                     context.arc(5,y,5,0,Math.PI*2,true);                     context.arc(canvas.width-5,y,5,0,Math.PI*2,true);                     context.closePath();                     context.fill();                 }             }             </script>         </head>     <body>         <div style="position: absolute; top: 100px; left: 100px;">         <canvas id="canvas" width="400" height="170" top=50px; left=50px;>         </div>     </body>     </html>     

 

圆角锯齿