新的自己个人学习 0 评论 52 阅读 2018-04-17 17:46:59 举报
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 变换图片 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- </canvas>
- <script>
- var canvas=document.getElementById("canvas");
- var context=canvas.getContext("2d");
- context.fillStyle="#eeeeff";
- context.fillRect(0, 0, 500, 500);
- context.shadowOffsetX=10;
- context.shadowOffsetY=10;
- context.shadowColor="rgba(100,100,100,0.5)";
- context.translate(0, 50);
- for (var i=0;i<3;i++) {
- context.translate(50,50);
- create5Star(context);
- context.fill();
- };
- // 绘制五角星
- function create5Star(context){
- var dx= 100;
- var dy= 0;
- var s= 50;
- // 创建路径
- context.beginPath();
- context.fillStyle="rgba(255,0,0,0.5)";
- var x=Math.sin(0);
- var y=Math.cos(0);
- var dig=Math.PI/5*4;
- for (var i=0;i<5;i++) {
- var x=Math.sin(i*dig);
- var y=Math.cos(i*dig);
- context.lineTo( dx + x * s,dy +y * s);
- }
- context.closePath();
- }
- </script>
- </body>
- </html>
canvas
HTML5
评论
0
喜欢
0
赞
0
评论 ( 0 )
走你
来源: http://www.qdfuns.com/note/49226/212fd08d371ff513e4b38c8aa7e6628c.html