canvas-star2.html
2015-11-19 17:31
393 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" style="margin:0 auto;"> The current browser does not support Canvas, can replace the browser a try! </canvas> <script> window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 1024; canvas.height = 768; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); context.fillStyle = "#000"; context.fillRect(0,0,canvas.width,canvas.height) for(var i=0;i<200;i++){ var r = Math.random() * 10 + 10; var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; var a = Math.random() * 360; drawStar(context , x , y , r , a ) } }else{ alert('当前游览器不支持Canvas,请更换游览器后再试!'); } } function drawStar(cxt,x,y,R,rot){ cxt.save(); cxt.translate(x,y); cxt.rotate(rot/180*Math.PI); cxt.scale(0.05*R,0.05*R) starPath(cxt); cxt.fillStyle = "#fb3"; cxt.strokeStyle = "#fd5"; cxt.lineWidth = 3; cxt.lineJoin = "round"; cxt.fill(); cxt.stroke(); cxt.restore() } function starPath(cxt){ cxt.beginPath(); for(var i=0;i<5;i++){ cxt.lineTo(Math.cos( (18+i*72) / 180 * Math.PI )*20, -Math.sin( (18+i*72) / 180 * Math.PI )*20); cxt.lineTo(Math.cos( (54+i*72) / 180 * Math.PI )*0.5*20, -Math.sin( (54+i*72) / 180 * Math.PI )*0.5*20); } cxt.closePath(); } </script> </body> <script> /*图形变换 位移 translate(x,y) 旋转 rotate(deg) 缩放 scale(sx,sy) */ </script> </html>
相关文章推荐
- canvas-star1.html
- canvas-star0.html
- 负责指定html的编码--有道笔记整理
- canvas-2rect.html
- canvas-2lineJoin.html
- canvas-2lineCap.html
- canvas-2drawRectFun.html
- canvas-0trasform.html
- canvas-0translate.html
- canvas-0scale.html
- canvas-tangram.html
- Canvas-line.html
- HTML\Script 去除关键字
- canvas-arc.html
- html弹出div弹窗
- 在Word指定位置插入富文本域值(html文本)
- 实现html页面的参数传递
- HTML常用标签大全及html标签的特点
- HTML中网页超链接设计
- html控件隐藏几种方法,占位隐藏