canvas 绘圆加边框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas 绘圆加边框相关的知识，希望对你有一定的参考价值。
html5中canvas元素，绘制圆形需要使用路径，开始时要取得图形上下文，首先使用路径来勾勒图形的轮廓，然后设置颜色，进行绘制。
arc(cx,cy,radius,start_angle,end_angle,direction);
cx 水平坐标
cy 垂直坐标
radius 圆心
start-angel 圆周起始位置 （以圆心为参考点，不是以坐标原点为参考点。下面配图详细解释）
end_angle 圆周结束位置 Math.PI是半圆 Math.PI*2是整个圆 0.5为四分之一
direction 顺、逆时针 false为顺时针，true为逆时针（决定了圆弧的方向）
<!DOCTYPE html> <head> <meta charset="UTF-8" /> <script> function draw(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext(‘2d‘); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); var n = 0; for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = ‘rgba(255, 0, 0, 0.25)‘; context.fill(); } } </script> </head> <body onLoad="draw(‘canvas‘);"> <canvas id="canvas" width="400" height="300"/> </body> </html>
context.beginPath();
该方法不使用参数，通过调用该方法，开始路径的绘制。在几次循环的创建路径的过程中，每次开始创建是都要调用beginPath函数。
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
该方法使用六个参数，x为绘制圆形的起点横坐标，y为绘制圆形图形的起点坐标，radius为绘制圆形半径，
starAngle为开始角度（以圆心为参考点，绕圆心旋转，不是以坐标原点为参考点），endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。
arc方法不仅可以用来绘制圆形，也可以用来绘制圆弧。
context.closePath();
将路径关闭后，路径的创建工作就完成了，但还没有真正绘制任何图形。
context.fillStyle = ‘rgba(255, 0, 0, 0.25)‘;
context.fill();
使用创建好的路径绘制图形。
<!DOCTYPE html> <html><head><meta charset="gbk"> <title>HTML5 Canvas画圆</title> </head> <body> <canvas id="canvas" width="400" height="400" style="border:2px solid blue;"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext(‘2d‘); var types = ["Arc.OPEN","Arc.CHORD","Arc.PIE"]; function render(w, h,context) { context.lineWidth=5; for (var i = 0; i < types.length; i++) { context.lineWidth=5; context.strokeStyle="blue"; context.beginPath(); context.arc((i+1)*w/4,(i+1)*h/4, w/10,Math.PI/4,3*Math.PI/2,false) if(i==1) context.closePath(); if(i==2) { context.lineTo((i+1)*w/4,(i+1)*h/4) context.closePath(); } context.stroke(); context.fillStyle="gray"; context.fill(); } } render(400,400,context); </script></body></html>
转：http://www.108js.com/article/article7/70206.html?id=1036
以上是关于canvas 绘圆加边框的主要内容，如果未能解决你的问题，请参考以下文章