简单用Html5画了一条鱼

本文分享了使用JavaScript实现鱼动画绘制的详细代码流程,包括鱼的头部、骨干、鱼尾及作者信息的绘制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


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;" />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值