canvas画一个椭圆形代码如下:
<canvas id="canvas_img1">your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas_img1');
canvas.width = '300';
canvas.height = '100';
var ctx = canvas.getContext('2d');
ctx.save();
ctx.scale(1,0.5);
ctx.beginPath();
ctx.arc(50,100,50,0,Math.PI*2,true);
ctx.strokeStyle = '#007FFF';
ctx.fillStyle = '#007FFF';
ctx.fill();
ctx.restore();//实心
ctx.save();
ctx.scale(1,0.5);
ctx.beginPath();
ctx.arc(200,100,50,0,Math.PI*2,true);
ctx.strokeStyle = '#007FFF';
ctx.fillStyle = '#007FFF';
ctx.stroke();
ctx.restore();//空心
</script>
<script type="text/javascript">
var canvas = document.getElementById('canvas_img1');
canvas.width = '300';
canvas.height = '100';
var ctx = canvas.getContext('2d');
ctx.save();
ctx.scale(1,0.5);
ctx.beginPath();
ctx.arc(50,100,50,0,Math.PI*2,true);
ctx.strokeStyle = '#007FFF';
ctx.fillStyle = '#007FFF';
ctx.fill();
ctx.restore();//实心
ctx.save();
ctx.scale(1,0.5);
ctx.beginPath();
ctx.arc(200,100,50,0,Math.PI*2,true);
ctx.strokeStyle = '#007FFF';
ctx.fillStyle = '#007FFF';
ctx.stroke();
ctx.restore();//空心
</script>