canvas画个椭圆
HTML5,使用canvas,简单地画个椭圆
直接上代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>test</title> <style> *{margin:0;padding:0;} body{position:relative;} #myCanvas{width: 600px;height:600px;background: lightblue;position: relative;z-index: 1;} body:before{content:'';position:absolute;z-index: 2;top: 0px;left:300px;height:600px;border-right: 1px solid #eee;} body:after{content:'';position:absolute;z-index: 2;top: 300px;left:0px;width: 600px;border-top: 1px solid #eee;} </style> </head> <body> <canvas id="myCanvas" width="600" height="600"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> // 获取canvas元素 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 设置椭圆的位置、大小和样式 ctx.beginPath(); // ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) // ctx.ellipse(中心点x.中心点y,半径x,半径y,旋转的角度,起始角,结果角,顺时针还是逆时针) ctx.ellipse(300, 300, 200, 100, 0, 0, 2*Math.PI); ctx.fillStyle = "red"; // 设置填充颜色为红色 ctx.strokeStyle = "blue"; // 设置边框颜色为蓝色 ctx.lineWidth = 2; // 设置线条宽度为2像素 ctx.closePath(); // 绘制椭圆 ctx.fill(); // 填充椭圆内部区域 ctx.stroke(); // 绘制椭圆边框 </script> </body> </html>