简单用Html5画了一条鱼

function draw(){
	var c = document.getElementById("myTrails");
	var cxt = c.getContext("2d");

	cxt.save();
	head(cxt);
	backbone(cxt);
	fishtail(cxt);
	setAuthor(cxt);
	cxt.restore();

	createTwoFish(cxt);
}

//再创建一条鱼
function createTwoFish(context){
	context.save();
	context.translate(250, 100);
	context.scale(0.5, 0.5);
	head(context);
	backbone(context);
	fishtail(context);			
	
	context.restore();				
}

// 头
function head(context){
	context.beginPath();			
	context.moveTo(100, 100);			
	context.quadraticCurveTo(200, -50, 300, 100);			
	context.moveTo(100, 100);
	context.lineTo(300, 100);
	context.stroke();
	
	context.beginPath();		
	context.arc(200, 60, 10, 0, Math.PI * 2, false);
	context.stroke();	
	context.beginPath();
	context.fillStyle = 'wilte';		
	context.arc(200, 60, 5, 0, Math.PI * 2, false);
	context.fill();
}

//骨干
function backbone(context){			
	context.moveTo(190, 100);
	//fillRect(x, y, width, height)x, y	矩形的左上角的坐标width, height	矩形的大小
	context.strokeRect(190, 100, 20, 35);
	context.closePath();
	context.stroke();
	
	for(var y = 150; y <= 450; y+=50){				
		twoBackbone(context, y);
	}	
	
}

function twoBackbone(context, y){
	context.beginPath();
	context.arc(200, y, 15, 0, Math.PI * 2, false);	//圆形		
	context.closePath();
	context.stroke();
	
	//左排骨
	context.beginPath();
	context.moveTo(185,y);
	context.quadraticCurveTo(75, y + 25, 165, y + 40);
	context.lineWidth  = 4;
	context.stroke();
	
	//右排骨
	context.beginPath();
	context.moveTo(215,y);
	context.quadraticCurveTo(320, y + 25, 235, y + 40);
			
	context.stroke();
	
	context.beginPath();
	context.lineWidth = 1;
	var height = 20;
	if(y == 450){
		height = 35;
	}
	context.strokeRect(190, y + 15, 20, height);//矩形
	
	context.closePath();
	context.stroke();
}

//鱼尾
function fishtail(context){
	context.beginPath();
	context.moveTo(190, 500);
	context.lineTo(110, 560);
	context.moveTo(210, 500);
	context.lineTo(290, 560);
	
	context.moveTo(110, 560);
	context.lineTo(200, 540);
	context.lineTo(290, 560);
	
	context.moveTo(200, 500);
	context.lineTo(200, 540);
	
	twoFishtail(context);	
	context.stroke();			
}

function twoFishtail(context){	
	var j = 10;	
	//右侧	
	for(var i = 0; i <= 50; i += 10,j += 10){				
		context.moveTo(200 + j, 500 + i);
		context.lineTo(200 + j, 540);
    }	
	
	j = 0;
	//左侧
	for(var i = 0; i <= 50; i += 10,j -= 10){				
		context.moveTo(190 + j, 500 + i);
		context.lineTo(190 + j, 540);
    }			
}

//设置作者
function setAuthor(context){			
	context.font = "20px impact";
	context.fontStyle = '#000000';
	context.textAlign = 'center';
	context.fillText('作者：王明', 370, 550);
	context.fillText('2012年10月15日', 370, 580);
}		
window.addEventListener("load", draw, true);

<canvas id="myTrails" width="450px" height="600px" style="border:1px solid #CCC;" />

评论

5 楼 up2pu 2012-11-21  

好<。)#)))≦，很有艺术价值

4 楼 chenzheng8975 2012-10-16  

3 楼 jianglijia 2012-10-16  

吃的真干净

2 楼 pch272215690 2012-10-16  

鱼骨头

1 楼 jinnianshilongnian 2012-10-16  

怪兽