html绘制圆形和弧形的代码,JavaScript canvas绘制圆弧与圆形

本文实例为大家分享了canvas绘制圆弧与圆形的具体代码，供大家参考，具体内容如下

canvas 绘制圆弧

绘制圆弧使用 context.arc( ) 函数，包含六个参数。

context.arc(

centerx,centery,radius,

startingAngle,endingAngle,

anticlockwise = false

)

分别代表：圆心 x 值，圆心 y 值，半径，开始的弧度值，结束的弧度值，(是否逆时针)。

例如：

window: onload = function(){

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

canvas.width = 800;

canvas.height = 800;

context.lineWidth = 5;

context.strokeStyle = "#005588";

context.arc(300, 300, 200, 0, 1.5*Math.PI)

context.stroke();

}

当需要绘制多条圆弧时，还是需要调用 context.beginPath( ) 和 context.closePath( ) 。但是当使用 context.closePath( ) 时，会自动将图形封闭，因此如果需要绘制不封闭圆弧，可以省略 context.closePath( )。

绘制实心圆

跟之前的多边形一样，使用 context.fill( ) ，代码：

Document

window: onload = function(){

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

canvas.width = 800;

canvas.height = 800;

context.lineWidth = 5;

context.strokeStyle = "#005588";

context.arc(300, 300, 200, 0, 1.5*Math.PI)

context.stroke();

context.fillStyle = "red";

context.fill();

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。