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

canvas锯齿

时间:2015-08-27 20:41:48      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             function draw(id){
 8                 var canvas = document.getElementById(id);
 9                 if(canvas == null){
10                     return false;
11                 }
12                 var context = canvas.getContext(2d);
13                 context.fillStyle = #eeeeff;
14                 context.fillRect(0,0,400,300);
15                 var dx = 150;
16                 var dy = 150;
17                 var s =100;
18                 context.beginPath();
19                 context.fillStyle = rgb(255,0,0);
20                 context.strokeStyle = rgb(0,0,0);
21                 var x = Math.sin(0);
22                 var y = Math.cos(0);
23                 var dig = Math.PI/15*11;
24                 for(var i=0;i<30;i++){
25                     var x = Math.sin(i*dig);
26                     var y = Math.cos(i*dig);
27                     context.lineTo(dx+x*s,dy+y*s);
28                 }
29                 context.closePath();
30                 context.fill();
31                 context.stroke();
32             }
33         </script>
34     </head>
35     <body onload="draw(‘canvas‘);">
36         <canvas id="canvas" width="400" height="300"></canvas>
37     </body>
38 </html>

 

canvas锯齿

标签:

原文地址:http://www.cnblogs.com/staven/p/4764400.html

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