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;" />
- 大小: 8.4 KB
分享到:
相关推荐
html5 canvas实现的海底世界鱼类游动动画特效源码.zip
html5新技术,利用canvas接口,js技术开发爱心鱼小游戏,解压即可使用
unity扫描仪画鱼1
一个完善的HTML5做的游戏
3D超级河豚鱼手机微信HTML5小游戏源码 直接可以用
我是一条鱼作文.doc
自己做的,画阴阳鱼的代码,用到了Circle和三角函数,希望能给比我还白的人一点帮助~
我是一条鱼作文.docx
python语言开发中利用turtle库实现多角色之两条鱼儿水中游案例,此案例需要背景图、以及四个小鱼儿素材。
HTML5海底鲨鱼魔鬼鱼群游动画基于HTML5 canvas制作,海底世界鱼群群游动画场景,鲨鱼群游动画,魔鬼鱼群游动画。
假如我是一条鱼作文.doc
鱼三维模型设计适用于鱼类3D模型设计
我是大海里的一条鱼作文.doc
我是一条鱼作文【热】.docx
HTML5 Canvas海里鱼游动特效是一款蓝色大海海水里鱼儿游动特效下载。
flash动画,游泳的鱼 供参考!!!!!!!!
大班《其实我是一条鱼》语言教案.docx
TED中英对照演讲稿我如何爱上一条鱼.doc
html5新技术,利用canvas接口,页面有吃果实总数及喂食小鱼的果实数量时时变化数据,js技术开发爱好者很好参考的爱心鱼小游戏,解压即可调试使用。
C#写的桌面动画游动的鱼,内附源码和解说