canvas绘制圆形
2018-04-03 08:49
218 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas绘制圆形</title> <style type="text/css"> body{ margin: 0; padding: 0; } </style> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); context.fillStyle = "#f1f2f3"; context.fillRect(0,0,500,500); for(var i=0;i<10;i++){ context.beginPath();//开始绘制路径 //context.arc(x,y,radius,starAngle,anticlockwise) //x为绘制圆形起点横坐标,y为绘制圆形起点的纵坐标,radius圆半径,starAngle开始角度,endAngle结束角度, //anticlockwise是否按顺时针绘制 context.arc(i*30,i*30,i*10,0,Math.PI*2,true);//Math.PI为180°,Math.PI*2表示角度为360° context.closePath();//绘制完成关闭路径 context.fillStyle = "rgba(255,0,0,0.25)";//绘制样式,图形颜色 context.fill();//调用样式 context.strokeStyle = 'red';//绘制边框样式 context.stroke();//调用样式 } } </script> </body> </html>
相关文章推荐
- js+html5实现canvas绘制圆形图案的方法
- html5 canvas绘制圆形进度实例
- canvas自适应圆形时钟绘制
- HTML5 Canvas使用路径——绘制圆形
- 用canvas绘制一个圆形,实现绕着一个中心运动
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)
- 绘制圆形,方法一(Canvas,drawOval)
- HTML5教程实例-用Canvas标签绘制圆形
- canvas绘制圆形
- canvas之绘制圆形
- html5 canvas绘制圆形印章,以及与页面交互
- 使用h5 canvas绘制圆形进度条
- Canvas中如何绘制弧形和圆形
- HTML5_canvas(设置画笔样式、左右跑动的小块、绘制路径的方法、写字板、绘制圆形的方法、吃豆豆、绘制文本、环形进度条)设置一个模板
- 【Html5】canvas绘制圆形
- 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo
- canvas绘制矩形、三角形、圆形
- html5-Canvas绘制弧线(圆形)
- canvas快速绘制圆形、三角形、矩形、多边形
- Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)