八卦图代码matlab,HTML5 Canvas arc()函数 八卦图示例

实例

创建一个圆形:

3ea8a6c1752945e2484d489b0fc10bc1.png

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(100,75,50,0,2*Math.PI);

ctx.stroke();

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。

注释:Internet Explorer 8 或更早的浏览器不支持元素。

定义和用法

arc() 方法创建弧/曲线(用于创建圆或部分圆)。

提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。

提示:请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

fbd3fb5bf3ab679b249e44297feabbdc.png

中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)

起始角:arc(100,75,50,0,1.5*Math.PI)

结束角:arc(100,75,50,0*Math.PI,1.5*Math.PI)

如果要创建一个圆形,我们可以使用arc()方法。

语法:arc(定义一个中心点,半径,起始角度,结束角度,和绘图方向:顺时针或逆时针)

代码:context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

HTML5 Canvas Arc 说明:

41244ffc00ab836b587b3162d11039e0.png

八卦图示例代码:

程序效果如下:

d2db0333ad40b3f5172def5f05889676.png

无标题文档

Java中的Canvas绘图源码实例,主要是画线条、弧线、圆角矩形、三角形、文字、圆形等简单的几何图形,主要是通过创建DrawingCanvas对象canvas,为canvas设置命令监听者,实现接口CommandListener的方法,把缓冲区图像的内容绘制到画布上,画图部分代码:   int w = getWidth(); // 画布的宽度   int h = getHeight(); // 画布的高度   Image buffer = Image.createImage(w, h); // 用于绘图的缓冲图像   Graphics gc = buffer.getGraphics(); // 获取缓冲图像的图形环境   // 清除画布   public void clearScreen() {    gc.setColor(255,255,255); // 设置绘图颜色为白色    gc.fillRect(0,0,w,h); // 把缓冲图像填充为白色    gc.setColor(255,0,0); // 设置绘图颜色为红色   }   // 绘制直线   public void drawLine() {    setTitle("直线"); // 设置画布的标题    clearScreen(); // 清除画布    gc.drawLine(10,10,w-20,h-20); // 绘制黑色直线    gc.setColor(0,0,255); // 设置绘图颜色为蓝色    gc.drawLine(10,h/2,w-10,h/2); // 绘制蓝色直线   }   // 绘制弧   public void drawArc() {    setTitle("弧线和填充弧");    clearScreen();    gc.drawArc(5,5,w/2-20,h/2-20,60,216); // 绘制弧线    gc.drawArc(5,h/2-10,w/2-20,h/2-20,0,360); // 绘制圆    gc.setColor(0,0,255);    gc.fillArc(w/2,5,w/2-20,h/2-20,60,216); // 绘制填充弧线    gc.fillArc(w/2,h/2-10,w/2-20,h/2-20,0,360); // 绘制填充圆   }   // 绘制矩形   public void drawRect() {    setTitle("矩形和填充矩形");    clearScreen();    gc.drawRect(25,25,w/2-30,h/2-30); // 绘制矩形    gc.fillRect(w/2 25,25,w/2-30,h/2-30); // 绘制填充矩形   }   // 绘制圆角矩形   public void drawRoundRect() {    setTitle("圆角矩形和填充圆角矩形");    clearScreen();    gc.drawRoundRect(5,5,w-5-30,h/2-30,20,20); // 绘制圆角矩形    gc.setColor(0,0,255);    gc.fillRoundRect(5,h/2,w-30,h/2-30,20,20); // 绘制填充圆角矩形   }   // 绘制三角形   public void drawTriangle() {    setTitle("填充三角形");    clearScreen();    gc.fillTriangle(w/2, h/6, w/6, h/2, w/2, h/2);   }   // 绘制文字   public void drawText() {    setTitle("文字"); //设置标题    clearScreen();    gc.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD,Font.SIZE_SMALL)); // 设置字体    gc.drawString("Hello World!",0,0,gc.TOP|gc.LEFT); // 使用当前字体绘制文字    gc.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD|Font.STYLE_UNDERLINED,Font.SIZE_LARGE));    gc.drawString("Hello
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值