HTML5 Canvas繪制恬靜夜景
編輯：網頁特效代碼
查看效果：http://hovertree.com/texiao/html5/28/
效果圖如下：
代碼如下：
<!doctype html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HTML5 Canvas繪制恬靜夜景 - 何問起</title><base target="_blank" />
<meta charset="utf-8">
<style>*{margin:0px;padding:0px;}body{text-align:center;}a{color:#333333;}</style>
</head>
<body>
<div><h2>何問起：程序媛，攻城獅，入夜了，睡覺啦......</h2>
</div>
<canvas id="hovertreecanvas" style="display:block;margin:0px auto;border:1px solid #aaa;">
何問起提醒：此浏覽器不支持canvas，請更換浏覽器
</canvas>
<div><a href="http://hovertree.com/h/bjaf/umtdyo4d.htm">原文</a> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a></div>
<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);
drawing2(context);
go();
draw_moon(context);
draw_moon2(context);
draw_moon3(context);
}
function go(){
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,'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="black";
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="black";
cxt.fill();
cxt.stroke();
cxt.beginPath();
cxt.moveTo(120,480);
cxt.lineTo(280,420);
cxt.lineTo(440,480);
cxt.closePath();
cxt.fillStyle="black";
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="black";
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="yellow";
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){ //畫月亮 hovertree.com
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="#ddd";
cxt.fill();
cxt.stroke();
}
function draw_moon2(cxt){ //月亮的眼睛。。。
cxt.beginPath();
cxt.moveTo(110,180);
cxt.lineTo(115,180);
cxt.stroke();
}
function draw_moon3(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>
效果圖如下：
代碼如下：
<!doctype html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HTML5 Canvas繪制恬靜夜景 - 何問起</title><base target="_blank" />
<meta charset="utf-8">
<style>*{margin:0px;padding:0px;}body{text-align:center;}a{color:#333333;}</style>
</head>
<body>
<div><h2>何問起：程序媛，攻城獅，入夜了，睡覺啦......</h2>
</div>
<canvas id="hovertreecanvas" style="display:block;margin:0px auto;border:1px solid #aaa;">
何問起提醒：此浏覽器不支持canvas，請更換浏覽器
</canvas>
<div><a href="http://hovertree.com/h/bjaf/umtdyo4d.htm">原文</a> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a></div>
<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);
drawing2(context);
go();
draw_moon(context);
draw_moon2(context);
draw_moon3(context);
}
function go(){
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,'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="black";
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="black";
cxt.fill();
cxt.stroke();
cxt.beginPath();
cxt.moveTo(120,480);
cxt.lineTo(280,420);
cxt.lineTo(440,480);
cxt.closePath();
cxt.fillStyle="black";
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="black";
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="yellow";
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){ //畫月亮 hovertree.com
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="#ddd";
cxt.fill();
cxt.stroke();
}
function draw_moon2(cxt){ //月亮的眼睛。。。
cxt.beginPath();
cxt.moveTo(110,180);
cxt.lineTo(115,180);
cxt.stroke();
}
function draw_moon3(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>
- 上一頁:css3列車行駛動畫
- 下一頁:不用驗證碼，拖動滑塊實現驗證jquery插件
小編推薦
熱門推薦