首页 » HTML » canvas绘制圆形

canvas绘制圆形

HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制。

canvas绘制圆形
<!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();

使用创建好的路径绘制图形。

此文章发表在 HTML. 将 固定链接 加入收藏.