<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas{background: #F5F5F5}
</style>
</head>
<body>
<canvas id="canvas1" width="900" height="1200">
当前浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('canvas1');//定义变量获取画布DOM
var context=canvas.getContext('2d');//设置绘图环境为2d
context.lineWidth=4;
context.strokeStyle="#FF00FF";
context.moveTo(200,100);
context.lineTo(200,200);
context.lineTo(250,200);
context.lineTo(250,150);
context.lineTo(150,150);
context.lineTo(150,200);
context.lineTo(200,200);
context.lineTo(200,250);
//context.closePath();//从当前点回到起始点来封闭路径
context.stroke();
//绘制矩形
context.beginPath();//此句不能省，否则上面的图样式会受下面的设置影响
context.lineWidth=2;
context.strokeStyle="#0000FF";
context.rect(260,100,50,20) //语句结尾分号;可省
context.stroke(); context.beginPath();
context.strokeRect(320,100,50,30); context.beginPath();
context.lineWidth=2;
context.fillStyle="#FF0000";
context.rect(380,100,40,20);
context.fill(); context.beginPath();
context.lineWidth=2;
context.fillStyle="#00FF00";
context.fillRect(430,100,50,50); context.beginPath();
context.lineWidth=3;
context.arc(500,200,50,0,(Math.PI)/2);//默认false顺时针，可设置true逆时针
context.stroke(); context.beginPath();
context.lineWidth=3;
context.arc(600,200,50,0,(Math.PI)/2);//默认false顺时针，可设置true逆时针
context.fill();
context.stroke(); context.beginPath();
context.arc(600,100,50,0,(Math.PI)/2);
context.stroke(); context.beginPath();
context.arc(700,100,50,0,(Math.PI)/2);
context.closePath();
context.fill();
context.stroke(); //绘制扇形，思路很好！
context.beginPath();
context.strokeStyle="#F5F5F5";
context.moveTo(200,400);
context.arc(200,400,150,Math.PI*7/6,Math.PI*11/6);
context.fill();
context.stroke();
context.beginPath();
context.fillStyle="#F5F5F5";
context.strokeStyle="#F5F5F5";
context.moveTo(200,400);
context.arc(200,400,50,Math.PI*7/6,Math.PI*11/6);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(200,400);
context.lineWidth=5;
context.arc(200,400,50,Math.PI*11/6,Math.PI*11/6);
context.stroke(); context.beginPath();
context.lineWidth=1;
context.strokeStyle="#000000";
context.fillStyle="#000000";
context.font="40px 隶书";
context.strokeText("黄山",280,400);
context.fillText("天柱山",380,400);
context.strokeStyle="#FFFF00";
context.fillStyle="#00FFFF";
context.fillText("方特欢乐世界",500,400);
context.strokeText("方特欢乐世界",500,400); //线性渐变
g=context.createLinearGradient(100,450,300,300);
g.addColorStop(0,"#000000");
g.addColorStop(0.2,"#ffffff");
g.addColorStop(0.4,"#FF0000");
g.addColorStop(0.6,"#00ff00");
g.addColorStop(1,"#0000ff");
context.fillStyle=g;
context.fillRect(100,450,300,300) //放射性渐变
r=context.createRadialGradient(650,550,0,650,550,100);
r.addColorStop(0,"#000000");
r.addColorStop(0.2,"#ffffff");
r.addColorStop(0.4,"#FF0000");
r.addColorStop(0.6,"#00ff00");
r.addColorStop(1,"#0000ff");
context.fillStyle=r;
context.arc(650,550,100,0,Math.PI*2);
context.fill(); //太极图
g1=context.createLinearGradient(40,920,320,920);
g1.addColorStop(0,"#000000");
g1.addColorStop(1,"#ffffff"); g2=context.createLinearGradient(40,920,320,920);
g2.addColorStop(0,"#ffffff");
g2.addColorStop(1,"#000000"); g3=context.createRadialGradient(120,1000,0,120,1000,10);
g3.addColorStop(0,"#ffffff");
g3.addColorStop(1,"#000000"); g4=context.createRadialGradient(280,1000,0,280,1000,10);
g4.addColorStop(0,"#000000");
g4.addColorStop(1,"#ffffff"); context.beginPath();
context.arc(200,1000,160,0,Math.PI);
context.arc(120,1000,80,0,Math.PI,true);
context.arc(280,1000,80,Math.PI,0,true);//没看懂为什么会反着颜色？
context.fillStyle=g1;
context.fill();//上面的疑问懂了：fill功能是把上面3个弧围成的区域填充！ context.beginPath();
context.arc(200,1000,160,0,Math.PI,true);
context.arc(280,1000,80,0,Math.PI);
context.arc(120,1000,80,Math.PI,0);
context.fillStyle=g2;
context.fill(); context.beginPath();
context.fillStyle=g3;
context.arc(120,1000,10,0,Math.PI*2);
context.fill(); context.beginPath();
context.fillStyle=g4;
context.arc(280,1000,10,0,Math.PI*2);
context.fill(); //设置文字阴影
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.shadowBlur=5;
context.shadowColor="red";
context.fillStyle="blue";
context.font="70px 隶书";
context.fillText("舌尖上的中国",400,700); //绘制饼图
context.beginPath();
context.shadowOffsetX=0;
context.fillStyle="black";
context.shadowColor="gray";
context.fillText("绘制饼图",400,800);
context.fillStyle="red";
context.moveTo(700,1000);
context.arc(700,1000,150,0,Math.PI/3);
context.fill();
context.closePath();//还可设closePath();
context.beginPath();
context.fillStyle="blue";
context.moveTo(700,1000);
context.arc(700,1000,150,Math.PI/3,Math.PI);
context.fill();
context.closePath();
context.beginPath();
context.fillStyle="green";
context.moveTo(700,1000);
context.arc(700,1000,150,Math.PI,Math.PI*5/3);
context.fill();
context.closePath();
context.beginPath();
context.fillStyle="yellow";
context.moveTo(700,1000);
context.arc(700,1000,150,Math.PI*5/3,Math.PI*2);
context.fill();
context.closePath();
context.fillStyle="black";
context.font="20px 隶书";
context.fillText("15%",750,1050);
context.fillText("35%",650,1050);
context.fillText("35%",650,950);
context.fillText("15%",750,950);
</script>
</body>
</html>