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;" />