<html>
<head>
<title>Canvas程序</title>
</head>
<body>
<canvas id="bigHeadCanvas" width="150" height="150"></canvas>
<canvas id="circleCanvas" width="150" height="150"></canvas>
<canvas id="fishCanvas" width="150" height="150"></canvas>
<canvas id="heartCanvas" width="150" height="150"></canvas>
<canvas id="pandaCanvas" width="150" height="150"></canvas>
<canvas id="sunFlowerCanvas" width="150" height="150"></canvas>
<canvas id="fiveStarCanvas" width="150" height="150"></canvas>
<canvas id="catCanvas" width="150" height="150"></canvas>
<canvas id="foxCanvas" width="150" height="150"></canvas>
<canvas id="appleCanvas" width="150" height="150"></canvas>
<canvas id="rectCanvas" width="150" height="150"></canvas>
<canvas id="sixCanvas" width="150" height="150"></canvas>
<canvas id="diamondCanvas" width="150" height="150"></canvas>
<canvas id="circleRectCanvas" width="150" height="150"></canvas>
<canvas id="eggCanvas" width="150" height="150"></canvas>
<script>
window.onload=function(){
drawBigHead();
drawCircle();
drawFish();
drawHeart();
drawPanda();
drawSunFlower();
drawFiveStar();
drawCat();
drawFox();
drawApple();
drawRect();
drawSix();
drawDiamond();
drawCircleRect();
drawEgg();
}
function drawBigHead(){
var c = document.getElementById("bigHeadCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,Math.PI*1.85,Math.PI*1.15);
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,45,Math.PI*1.35,Math.PI*1.68);
ctx.stroke();
ctx.beginPath();
ctx.arc(17,17,15,Math.PI*0.7,Math.PI*1.8);//左耳
ctx.stroke();
ctx.beginPath();
ctx.arc(87,17,15,Math.PI*1.15,Math.PI*0.3);//右耳
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('大头熊形',30,130);
}
function drawCircle(){
var c = document.getElementById("circleCanvas");
var ctx = c.getContext("2d");
ctx.arc(55,55,50,Math.PI*0,Math.PI*2);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('圆形',35,130);
}
function drawFish(){
var c = document.getElementById("fishCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(56,52,52,Math.PI*0.75,Math.PI*1.44);
ctx.stroke();
ctx.beginPath();
ctx.arc(32,52,52,Math.PI*1.57,Math.PI*0.25);
ctx.stroke();
ctx.beginPath();
ctx.arc(42,135,32,Math.PI*1.30,Math.PI*1.70);
ctx.stroke();
ctx.beginPath();
ctx.arc(17,105,8,Math.PI*0.15,Math.PI*1.3);
ctx.lineTo(20,88);
ctx.stroke();
ctx.beginPath();
ctx.arc(67,105,8,Math.PI*0.88,Math.PI*1.75,true);
ctx.lineTo(70,88);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('鱼形',28,130);
}
function drawHeart(){
var c = document.getElementById("heartCanvas");
var ctx = c.getContext("2d");
ctx.arc(36,26,20,Math.PI*0.75,Math.PI*1.75);
ctx.lineTo(60,25);
ctx.lineTo(70,10);
ctx.stroke();
ctx.beginPath();
ctx.arc(83,26,20,Math.PI*1.25,Math.PI*0.25);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(21,40);
ctx.lineTo(60,90);
ctx.lineTo(98,40);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('心形',45,130);
}
function drawPanda(){
var c = document.getElementById("pandaCanvas");
var ctx = c.getContext("2d");
//上
ctx.arc(18,15,15,Math.PI*0.75,Math.PI*1.85);
ctx.stroke();
ctx.beginPath();
ctx.arc(80,15,15,Math.PI*1.13,Math.PI*0.20);
ctx.lineTo(88,39);
ctx.stroke();
ctx.beginPath();
ctx.arc(48,75,70,Math.PI*1.42,Math.PI*1.59);
ctx.stroke();
//中
ctx.beginPath();
ctx.arc(30,55,28,Math.PI*0.75,Math.PI*1.25);
ctx.lineTo(6,23);
ctx.stroke();
ctx.beginPath();
ctx.arc(66,55,28,Math.PI*1.78,Math.PI*0.25);
ctx.lineTo(80,88);
ctx.stroke();
//下
ctx.beginPath();
ctx.arc(25,93,12,Math.PI*0.27,Math.PI*1.20);
ctx.lineTo(10,74);
ctx.stroke();
ctx.beginPath();
ctx.arc(70,93,12,Math.PI*1.83,Math.PI*0.73);
ctx.stroke();
ctx.beginPath();
ctx.arc(47,135,35,Math.PI*1.35,Math.PI*1.65);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('大熊形',33,130);
}
function drawSunFlower(){
var c = document.getElementById("sunFlowerCanvas");
var ctx = c.getContext("2d");
var startX=2;
var startY=2;
var radius=15;
//上
ctx.beginPath();
ctx.arc(startX+4*radius,startY+1.5*radius,radius,Math.PI*1,Math.PI*0);
ctx.stroke();
//下
ctx.beginPath();
ctx.arc(startX+4*radius,startY+6.3*radius,radius,Math.PI*0,Math.PI*1);
ctx.stroke();
//左
ctx.beginPath();
ctx.arc(startX+1.5*radius,startY+4.0*radius,radius,Math.PI*0.4,Math.PI*1.6);
ctx.stroke();
//右
ctx.beginPath();
ctx.arc(startX+6.2*radius,startY+4*radius,radius,Math.PI*0.5,Math.PI*1.5,true);
ctx.stroke();
//上右
ctx.beginPath();
ctx.arc(startX+5.7*radius,startY+2.1*radius,radius,Math.PI*1.20,Math.PI*0.40);
ctx.stroke();
//上左
ctx.beginPath();
ctx.arc(startX+2.0*radius,startY+2.0*radius,radius,Math.PI*1.9,Math.PI*0.60,true);
ctx.stroke();
//下左
ctx.beginPath();
ctx.arc(startX+2.0*radius,startY+6.0*radius,radius,Math.PI*0,Math.PI*1.38);
ctx.stroke();
//下右
ctx.beginPath();
ctx.arc(startX+5.8*radius,startY+5.8*radius,radius,Math.PI*0.78,Math.PI*1.58,true);
ctx.stroke();
ctx.font="12px Airal";
ctx.strokeText('太阳花形',35,130);
}
function drawFiveStar(){
var c = document.getElementById("fiveStarCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(30,2
Html利用Canvas绘制图形
版权申诉
64 浏览量
2023-07-16
17:11:58
上传
评论
收藏 52KB RAR 举报
DemoCanvas.rar （3个子文件） 
DemoCanvas 
Canvas.html 15KB
Canvas.jpg 58KB
apple.png 5KB资源评论
老码识途呀
- 粉丝: 4429
- 资源: 33
