码迷,mamicode.com
首页 > 其他好文 > 详细

圆角锯齿

时间:2017-04-24 12:22:18      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:logs   pre   etc   tle   als   load   asc   ffffff   doc   

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

 

圆角锯齿

标签:logs   pre   etc   tle   als   load   asc   ffffff   doc   

原文地址:http://www.cnblogs.com/vali/p/6755673.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!