function draw(){
var c = ElementById("myTrails");
var cxt = c.getContext("2d");
cxt.save();
head(cxt);
backbone(cxt);
fishtail(cxt);
setAuthor(cxt);
createTwoFish(cxt);
}
//再创建一条鱼
function createTwoFish(context){
context.save();
context.scale(0.5, 0.5);
head(context);
backbone(context);
fishtail(context);
}
// 头
function head(context){
context.beginPath();
context.quadraticCurveTo(200, -50, 300, 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){
//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.quadraticCurveTo(75, y + 25, 165, y + 40);
context.lineWidth = 4;
context.stroke();
//右排骨
context.beginPath();
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.lineTo(110, 560);
context.lineTo(290, 560);
context.lineTo(200, 540);
context.lineTo(290, 560);
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.lineTo(200 + j, 540);
}
j = 0;
//左侧
for(var i = 0; i <= 50; i += 10,j -= 10){
context.lineTo(190 + j, 540);
}
}
//设置作者
function setAuthor(context){
context.font = "20px impact";
context.fontStyle = '#000000';
context.fillText('作者：王明', 370, 550);
context.fillText('2012年10月15日', 370, 580);
}
window.addEventListener("load", draw, true);
本文发布于:2024-01-31 12:15:09，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170667451228447.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
