<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><title>Document</title></Head><Body> <CanvasID= "Canvas"style= "border:1px solid #ccc;d isplay:block;">the current browser does not support canvas, please replace the browser after you try. </Canvas><Script>window.onload= function () { varCanvas=document.getElementById ('Canvas'); varContext=Canvas.getcontext ('2d'); Canvas.width= -; Canvas.height= -; Context.linewidth= 5; Context.strokestyle= 'Black'; for (varI= 0; I< Ten; I++) {Context.beginpath (); Context.arc ( - +I* -, -, +, 0 , 0.2 *(i+ 1) *Math.PI); //Context.arc (center x axis coordinate, center y coordinate, radius, start point, end point, [clockwise/counterclockwise, true counterclockwise, default = False]);Context.closepath (); Context.stroke (); }; for (varI= 0; I< Ten; I++) {Context.beginpath (); Context.arc ( - +I* -, $, +, 0 , 0.2 *(i+ 1) *Math.PI); Context.stroke (); }; for (varI= 0; I< Ten; I++) {Context.beginpath (); Context.arc ( - +I* -, -, +, 0 , 0.2 *(i+ 1) *Math.PI,true); Context.closepath (); Context.stroke (); }; Context.fillstyle= 'Orange'; for (varI= 0; I< Ten; I++) {Context.beginpath (); Context.arc ( - +I* -, -, +, 0 , 0.2 *(i+ 1) *Math.PI,true); Context.stroke (); Context.fill (); }; }</Script></Body></HTML>
Canvas Drawing Circle