html 代码
- <!DOCTYPE html>
- <html>
- <head lang="cn">
- <title > 星空下温馨的家 </title>
- <meta charset="utf-8">
- <meta http-equiv="refresh" content="3">
- </head>
- <body>
- <canvas id="canvas" style="display:block;margin:50px auto;border:1px solid #aaa;">
- 此浏览器不支持 canvas, 请更换浏览器
- </canvas>
- <script>
- window.onload=function (){
- canvas=document.getElementById('canvas');
- canvas.width=1000;
- canvas.height=560;
- context=canvas.getContext('2d');
- drawing(context);
- drawing_start_1(context);
- drawing2(context);
- go();
- draw_moon(context);
- draw_ease(context);
- draw_ease_1(context);
- draw_sleep(context);
- };
- function go(){
- for(var i=0;i<20;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<20;i++){
- cxt.moveTo(0,i*20);
- cxt.lineTo(1000,i*20);
- cxt.stroke();
- }
- }
- function draw2(cxt){
- cxt.beginPath();
- for(i=0;i<20;i++){
- cxt.moveTo(i*20,0);
- cxt.lineTo(i*20,100);
- cxt.stroke();
- }
- }
- function drawing(cxt){ // 画整体背景颜色渐变
- var linearGrad=cxt.createLinearGradient(500,0,500,540);
- linearGrad.addColorStop(0.0,'black');
- linearGrad.addColorStop(1.0,'blue');
- cxt.fillStyle=linearGrad;
- cxt.fillRect(0,0,1000,540);
- cxt.fill();
- }
- // 画的房子
- function drawing2(cxt){ // 画的草坪
- cxt.beginPath();
- cxt.moveTo(0,540);
- cxt.lineTo(1000,540);
- cxt.lineTo(1000,560);
- cxt.lineTo(0,560);
- cxt.closePath();
- cxt.fillStyle="rgba(34,177,76,1)";
- cxt.fill();
- cxt.stroke();
- cxt.beginPath();// 正方形, 放在主体
- cxt.moveTo(200,540);
- cxt.lineTo(360,540);
- cxt.lineTo(360,480);
- cxt.lineTo(200,480);
- cxt.closePath();
- cxt.fillStyle="purple";
- cxt.fill();
- cxt.stroke();
- cxt.beginPath();// 三角形
- cxt.moveTo(120,480);
- cxt.lineTo(280,420);
- cxt.lineTo(440,480);
- cxt.closePath();
- cxt.fillStyle="purple";
- cxt.fill();
- cxt.stroke();
- cxt.beginPath();// 画的烟囱
- cxt.moveTo(320,435);
- cxt.lineTo(320,420);
- cxt.lineTo(340,420);
- cxt.lineTo(340,442);
- cxt.closePath();
- cxt.fillStyle="#fff";
- cxt.fill();
- cxt.stroke();
- cxt.beginPath();// 画窗户
- cxt.moveTo(240,520);
- cxt.lineTo(260,520);
- cxt.lineTo(260,500);
- cxt.lineTo(240,500);
- cxt.closePath();
- cxt.fillStyle="pink";
- cxt.fill();
- cxt.stroke();
- cxt.beginPath();// 画窗户上的线条, 形成一个字
- cxt.moveTo(240,510);
- cxt.lineTo(260,510);
- cxt.lineTo(250,500);
- cxt.lineTo(250,520);
- cxt.closePath();
- cxt.stroke();
- // cxt.beginPath();//// 画窗户上的线条, 形成一个田字
- // cxt.moveTo(240,520);
- // cxt.lineTo(260,520);
- // cxt.lineTo(260,500);
- // cxt.lineTo(240,500);
- // cxt.closePath();
- // cxt.fillStyle="plum";
- // cxt.fill();
- // cxt.stroke();
- //
- // cxt.beginPath();
- // cxt.moveTo(240,510);
- // cxt.lineTo(260,510);
- // cxt.moveTo(250,500);
- // cxt.lineTo(250,520);
- // cxt.closePath();
- // cxt.stroke();
- }
- function drawing_start_1(cxt){ // 星星背景
- cxt.beginPath();
- cxt.rect(0,0,1000,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="#cf3";
- 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();
- }
- function draw_ease(cxt){ // 月亮的眼睛...
- cxt.beginPath();
- cxt.arc(115,180,4,130,180);
- cxt.fillStyle="#000";
- cxt.fill();
- cxt.stroke();
- }
- function draw_ease_1(cxt){ // 月亮的眼睛...
- cxt.beginPath();
- cxt.arc(115,180,1.8,130,180);
- cxt.fillStyle="#fff";
- cxt.fill();
- cxt.stroke();
- }
- function draw_sleep(cxt){ //zzz...
- cxt.beginPath();
- cxt.moveTo(40,80);
- cxt.lineTo(60,80);
- cxt.lineTo(40,100);
- cxt.lineTo(60,100);
- cxt.strokeStyle="yellow";
- cxt.stroke();
- cxt.beginPath();
- cxt.moveTo(63,108);
- cxt.lineTo(80,108);
- cxt.lineTo(63,123);
- cxt.lineTo(80,123);
- cxt.strokeStyle="yellow";
- cxt.stroke();
- cxt.beginPath();
- cxt.moveTo(86,130);
- cxt.lineTo(100,130);
- cxt.lineTo(86,142);
- cxt.lineTo(100,142);
- cxt.strokeStyle="yellow";
- cxt.stroke();
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/30022/667bdc04f676f21ca4aba7a407545304.html