gzhu2016 · Nicole912 · Jan 14, 2017
diff --git a/1510300144/五星红旗.png b/1510300144/五星红旗.png
diff --git a/1510300144/绘制五星红旗.html b/1510300144/绘制五星红旗.html
@@ -0,0 +1,50 @@
+
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>canvas 绘制五星红旗</title>
+</head>
+<body>
+<canvas id="myCanvas" width="600" height="400" style="border:1px solid #000"></canvas>
+<script type="text/javascript">
+    var c=document.getElementById("myCanvas");
+    var ctx=c.getContext("2d");
+    var width=c.width;
+    var height=width*2/3;
+    ctx.fillStyle="red";
+    ctx.fillRect(0,0,width,height);
+    var maxR=0.15,minR=0.05;	//0.15大五角星的半径，0.05小五角星的半径
+    var maxX=0.25,maxY=0.25;	//大五角星的位置
+    var minX=[0.50,0.60,0.60,0.50];	//小五角星的X坐标
+    var minY=[0.10,0.20,0.35,0.45];	//小五角星的Y坐标
+    var ox=height*maxX,oy=height*maxY;	//大五角星的中心坐标
+    drawStar(ctx,ox,oy,height*maxR,"#ff0",0);	//绘制五角星
+    for (var idx = 0; idx < 4; idx++) {
+        var  sx = minX[idx] * height, sy = minY[idx] * height;
+        var  theta = Math.atan((oy - sy)/(ox - sx));
+        drawStar(ctx,sx, sy, height * minR, "#ff0",-Math.PI/2+theta);
+    }
+    /*五角星的坐标为（sx,sy）,半径为radius,rotate为0时一个顶点在对称轴上*/
+    /*rotate:绕对称轴旋转rotate弧度*/
+    function drawStar(ctx,sx,sy,radius,color,rotate){
+        ctx.save();
+        ctx.fillStyle=color;
+        ctx.translate(sx,sy);		//移动坐标原点
+        ctx.rotate(Math.PI+rotate);		//Math.PI等于圆周率3.14
+        ctx.beginPath();
+        //360度分成5份，2/5*PI,但底下是PI/5*4,那就想想平时是怎么画五角星的
+        var dig=Math.PI/5*4;
+        for(var i=0;i<5;i++){		//画五角星的五条长边
+            var x=Math.sin(i*dig);	//点的x坐标
+            var y=Math.cos(i*dig);	//点的y坐标
+            ctx.lineTo(x*radius,y*radius);
+        }
+        ctx.closePath();
+        ctx.stroke();
+        ctx.fill();
+        ctx.restore();
+    }
+</script>
+</body>
+</html>
diff --git a/1510300144/绘制星空图.html b/1510300144/绘制星空图.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+<head><meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title></title><base target="_blank" />
+    <meta charset="utf-8">
+</head>
+<body>
+<canvas id="hovertreecanvas" style="display:block;margin:0px auto;border:1px solid #aaa;">
+    此浏览器不支持canvas，请更换
+</canvas>
+<script>
+    hovertreenight(); setInterval(hovertreenight, 4000);
+    function hovertreenight () {
+        canvas = document.getElementById('hove'+'rtreecanvas');
+        canvas.width=1000;
+        canvas.height=560;
+        context=canvas.getContext('2d');
+
+        drawing(context);
+        drawing_start_1(context);
+        hh();
+        draw_moon(context);
+        draw_moon2(context);
+        draw_moon3(context);
+    }
+    function hh(){
+        for(var i=0;i<100;i++){
+            var r=Math.random()*10+3;
+            var x=Math.random()*1000;
+            var y=Math.random()*300;
+            var a=Math.random()*360;
+            drawing_start_2(context,x,y,r,r/2.0,a);
+
+        }
+    }
+    function draw(cxt){
+        cxt.beginPath();
+        for(i=0;i<56;i++){
+            cxt.moveTo(0,i*20);
+            cxt.lineTo(1000,i*20);
+            cxt.stroke();
+        }
+    }
+    function draw2(cxt){
+        cxt.beginPath();
+        for(i=0;i<56;i++){
+            cxt.moveTo(i*20,0);
+            cxt.lineTo(i*20,560);
+            cxt.stroke();
+        }
+    }
+    function drawing(cxt){ //画整体背景颜色渐变
+        var linearGrad=cxt.createLinearGradient(500,0,500,540);
+        linearGrad.addColorStop(0.0,'black');
+        linearGrad.addColorStop(1.0,'purple');
+        cxt.fillStyle=linearGrad;
+        cxt.fillRect(0,0,1000,540);
+        cxt.fill();
+    }
+    function drawing_start_1(cxt){ //星星背景
+        cxt.beginPath();
+        cxt.rect(0,0,0,550);
+        cxt.closePath();
+        cxt.stroke();
+    }
+    function drawing_start_2(cxt,x,y,outerR,innerR,rot){ //画星星
+        cxt.beginPath();
+        for(var i=0;i<5;i++){
+            cxt.lineTo((Math.cos(18+i*72-rot)/180*Math.PI)*outerR+x,
+                    -Math.sin((18+i*72-rot)/180*Math*outerR+y));
+
+            cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x,
+                    -Math.sin((54+i*72-rot)/180*Math.PI)*innerR+y);
+        }
+        cxt.fillStyle="White"
+        cxt.fill();
+        cxt.closePath();
+        cxt.stroke();
+    }
+    function draw_moon(cxt){ //画月亮
+        cxt.beginPath();
+        cxt.arc(200, 200, 100, 0.6 * Math.PI, 1.3 * Math.PI);
+        cxt.bezierCurveTo(140, 119, 93, 224, 169, 295);
+        cxt.fillStyle="Yellow";
+        cxt.fill();
+        cxt.stroke();
+        context.font="20px Verdana bold";
+    context.fillStyle="white";
+    context.fillText("张临军1510300144",10,500);
+        context.font="30px Verdana bold";
+        context.fillStyle="white";
+        context.fillText("璀璨星空",440,35);
+    }
+</script>
+</body>
+</html>
diff --git a/1510300144/艺术品.html b/1510300144/艺术品.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>艺术品</title>
+    <style type="text/css">
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        #mycanvas {
+            background:
+
+            #E9967A
+        ;
+        }
+    </style>
+</head>
+
+<body>
+<canvas id="mycanvas">
+    你的浏览器居然不支持Canvas?!赶快换一个吧！！
+</canvas>
+<script>
+    //获取mycanvas画布
+    var can = document.getElementById("mycanvas");
+    var ctx = can.getContext("2d");
+    //画布宽度
+    var wid = window.innerWidth;
+    //画布高度
+    var hei = window.innerHeight;
+    can.width = wid;
+    can.height = hei;
+    //雪花数目
+    var snow = 150;
+    //雪花坐标、半径
+    var arr = []; //保存各圆坐标及半径
+    for (var i = 0; i < snow; i++) {
+        arr.push({
+            x: Math.random() * wid,
+            y: Math.random() * hei,
+            r: Math.random() * 10 + 1
+        })
+    }
+    //画雪花
+    function DrawSnow() {
+        ctx.clearRect(0, 0, wid, hei);
+        ctx.fillStyle = "white";
+        ctx.beginPath();
+        for (var i = 0; i < snow; i++) {
+            var p = arr[i];
+            ctx.moveTo(p.x, p.y);
+            ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);
+        }
+        ctx.fill();
+        SnowFall();
+        ctx.closePath();
+    }
+    //雪花飘落
+    function SnowFall() {
+        for (var i = 0; i < snow; i++) {
+            var p = arr[i];
+            p.y += Math.random() * 2 + 1;
+            if (p.y > hei) {
+                p.y = 0;
+            }
+            p.x += Math.random() * 2 + 1;
+            if (p.x > wid) {
+                p.x = 0;
+            }
+        }
+    }
+    setInterval(DrawSnow, 50);
+</script>
+</body>
+
+</html>
diff --git a/1510300144/艺术品1.png b/1510300144/艺术品1.png
diff --git a/1510300144/艺术品2.png b/1510300144/艺术品2.png