简单用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;" />
页:
[1]