标签只是图形容器,您必须使用脚本来绘制图形。
设置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>