HTML5 的<canvas>标签

标签只是图形容器，您必须使用脚本来绘制图形。
设置css样式：

  <style type="text/css">
        canvas{background: #c0c0c0}
    </style>

您的浏览器暂不支持Html5的canvas元素,因为版本过低。

<canvas id="mycanvas" width="1000" height="1000">
    您的浏览器暂不支持Html5的canvas元素,因为版本过低。
    <!--定义一个画布-->
</canvas>

<script type="text/javascript">
    var canvas=document.getElementById('mycanvas');//定义变了获取画布SDOM
    var context=canvas.getContext('2d')//设置绘画环境2d
    context.lineWidth=10;
    context.strokeStyle="#A52A2A"
    context.moveTo(50,50);//起点
    context.lineTo(300,50);//终点
    context.lineTo(300,250);
    context.lineTo(50,250);
    context.closePath();
    context.stroke();//绘制成功

**

绘制图形-放射性渐变色

**

<canvas id="can" width="1000" height="1000">
  您的浏览器暂不支持Html5的canvas元素,因为版本过低。
    <!--定义一个画布-->
</canvas>
<script type="text/javascript">
    var canvas =document.getElementById('can');
    var c =canvas.getContext('2d');
    g=c.createRadialGradient(400,300,10,400,300,300);
    g.addColorStop(0,"#000000");
    g.addColorStop(0.8,"red");
    g.addColorStop(1,"#FFFFFF");
    c.fillStyle=g
    c.arc(400,300,300,0,Math.PI*2);
    c.fill()

</script>

**

绘制饼图

**

<canvas id="can" width="800" height="600">
    您的浏览器查看不到,请升级浏览器
</canvas>
<script type="text/javascript">
    var  canvas =document.getElementById('can');
    c=canvas.getContext('2d');
    c.shadowOffsetX=0;
    c.shadowOffsetY =8;
    c.shadowBlur =8;
    c.shadowColor="Black";
    c.fillStyle="Black";
    c.font="50px 隶属";
    c.fillText("绘制饼图",50,50);
    c.beginPath();
    c.fillStyle ="Brown";
    c.moveTo(400,300);
    c.arc(400,300,160,0,Math.PI/3);
    c.fill();

    c.fillStyle ="Black";
    c.font="20px 隶属";
    c.fillText("15%",480,370);
    c.beginPath();

    c.fillStyle ="blue";
    c.moveTo(400,300);
    c.arc(400,300,160,Math.PI/3,Math.PI);
    c.fill();

    c.fillStyle ="Black";
    c.font="20px 隶属";
    c.fillText("33.3%%",350,370);
    c.beginPath();

    c.fillStyle ="blue";
    c.moveTo(400,300);
    c.arc(400,300,160,Math.PI/3,Math.PI);
    c.fill();

    c.fillStyle ="Black";
    c.font="20px 隶属";
    c.fillText("33.3%%",350,370);
    c.beginPath();

    c.fillStyle ="Gold";
    c.moveTo(400,300);
    c.arc(400,300,160,Math.PI ,Math.PI*1.6);
    c.fill();

    c.fillStyle ="Black";
    c.font="20px 隶属";
    c.fillText("33.3%",300,250);
    c.beginPath();

    c.fillStyle ="Orange";
    c.moveTo(400,300);
    c.arc(400,300,160,Math.PI*1.6,Math.PI*2);
    c.fill();

    c.fillStyle ="Black";
    c.font="20px 隶属";
    c.fillText("15%",480,270);
    c.beginPath();
</script>

**

绘制阴影文字

**

<style>
        canvas{background: #c0c0c0}
</style>
<canvas id="can" width="1500" height="1500">
    您的浏览器查看不到,请升级浏览器
</canvas>
<script type="text/javascript">
    var  canvas =document.getElementById('can');
    var  c=canvas.getContext('2d');
    c.shadowOffsetX=8;
    c.shadowOffsetY =8;
    c.shadowBlur =8;
    c.shadowColor="blue";
    c.fillStyle="Brown";
    c.font="60Px 隶属";
    c.fillText("我爱学习",100,200);

    c.beginPath();
    c.strokeRect(100,100,600,150);

 </script>

**

太极图案变色

**

<canvas id="can" width="800" height="600">

</canvas>
<script type="text/javascript">
    var canvas =document.getElementById('can')
    var c =canvas.getContext('2d');
    g1=c.createLinearGradient(400,100,400,500);
    g1.addColorStop(0,"#000000");
    g1.addColorStop(1,"#FFFFFF");

    g2=c.createLinearGradient(400,100,400,500);
    g2.addColorStop(0,"#FFFFFF");
    g2.addColorStop(1,"#000000");

    g3=c.createRadialGradient(400,400,1,400,400,10);
    g3.addColorStop(0,"#FFFFFF");
    g3.addColorStop(1,"#000000");

    g4=c.createRadialGradient(400,200,1,400,200,10);
    g4.addColorStop(0,"#000000");
    g4.addColorStop(1,"#FFFFFF");

    c.fillStyle=g1;
    c.arc(400,300,200,Math.PI/2,Math.PI*1.5);
    c.arc(400,200,100,Math.PI/2,Math.PI*1.5,true);
    c.arc(400,400,100,Math.PI*1.5,Math.PI/2,true);
    c.fill();

    c.beginPath();
    c.fillStyle=g2;
    c.arc(400,300,200,Math.PI/2,Math.PI*1.5,true);
    c.arc(400,400,100,Math.PI/2,Math.PI*1.5);
    c.arc(400,200,100,Math.PI*1.5,Math.PI/2);
    c.fill();

    c.beginPath();
    c.fillStyle=g3;
    c.arc(400,400,10,0,Math.PI*2);
    c.fill();

    c.beginPath();
    c.fillStyle=g4;
    c.arc(400,200,10,0,Math.PI*2);
    c.fill();

</script>

**

strokeText绘制文字

**

<canvas id="arc" width="800" height="800" >
    您浏览暂不支持,请升级后查看
</canvas>
<script>
    var canvas=document.getElementById('arc');
    var arct=canvas.getContext('2d');
    arct.lineWidth=0.5;
    arct.strokeStyle ="green";
    arct.fillStyle ="#FFA500";
    arct.font ="40px 隶属"
    arct.strokeText("乾",100,100);
    arct.fillText("坤",140,100)

    arct.strokeText("乾",300,100);
    arct.fillText("坤",340,100)
</script>

**

综合扇形加字渐变色

**

<style>
        canvas{background: #c0c0c0}
</style>
<canvas id="can" width="1500" height="1500">
    您的浏览器查看不到,请升级浏览器
</canvas>
<script type="text/javascript">
    var  canvas =document.getElementById('can');
    var  c=canvas.getContext('2d');
    c.strokeStyle ="green";

//    c.fillStyle ="#FFA500";
    g=c.createRadialGradient(300,400,150,300,400,300);
    g.addColorStop(0,"#000000");
    g.addColorStop(0.8,"red");
    g.addColorStop(1,"#FFFFFF");
    c.fillStyle=g
    c.moveTo(300,400);
    c.arc(300,400,300,Math.PI*7/6,Math.PI*11/6,false);
    c.fill();

    c.beginPath();
    c.strokeStyle ="green";
    c.fillStyle ="#c0c0c0";
    c.moveTo(300,400);
    c.arc(300,400,150,Math.PI*7/6,Math.PI*11/6,false);
    c.closePath();
    c.fill();
    c.beginPath();
    c.lineWidth=0.5;
    c.fillStyle ="red";
    c.font ="40px 隶属"
    c.strokeText("乾",280,175);
    c.fillText("坤",280,215);
</script>