JavaFX之Canvas_H5之家 - 中国HTML5教程资源分享第一站

JavaFX 2.2中新增加了一个很重要而且也很常见的东西 -- Canvas。

JavaFX中的Canvas，是继承Node的，按照继承的层级关系来看，它跟ImageView，MediaView，Parent和Shape是同

一层级的。

因此Canvas不能直接放入Scene中，必须添加到Parent中，然后加入Scene。

Canvas中包含了一个GraphicsContext，用来负责Canvas中的图形绘制的。其实也就是类似与Java2D的Graphics，

Graphics2D。

而GraphicsContext不仅仅可以进行各种图形的绘制，也可以应用JavaFX的一些特效，同时也有save和restore功能，

可以保存和还原一些全局参数。

下面我们来看看Canvas的简单的功能吧。

新建一个类MyCanvas继承Canvas。

import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.paint.Color; import javafx.scene.shape.ArcType; public class MyCanvas extends Canvas { private GraphicsContext gc; public MyCanvas(double width, double height){ super(width, height); gc = getGraphicsContext2D(); draw(gc); } public void draw(GraphicsContext gc){ gc.save(); gc.setStroke(Color.BLUE); gc.setLineWidth(2); //设置线的宽度 gc.strokeLine(0, 0, 50, 50); //绘制直线 gc.restore(); //绘制椭圆 gc.save(); gc.setFill(Color.YELLOWGREEN); gc.strokeOval(0, 80, 50, 50); gc.fillOval(100, 80, 50, 50); gc.restore(); //绘制矩形 gc.save(); gc.setStroke(Color.CHOCOLATE); gc.fillRect(0, 150, 50, 50); gc.strokeRect(100, 150, 50, 50); gc.restore(); //绘制圆角矩形 gc.save(); gc.setFill(Color.CHOCOLATE); gc.fillRoundRect(0, 220, 50, 50, 15, 15); gc.strokeRoundRect(100, 220, 50, 50, 15, 15); gc.restore(); //绘制扇形 gc.save(); gc.setStroke(Color.CHOCOLATE); gc.fillArc(10, 300, 30, 30, 40, 280, ArcType.OPEN); gc.fillArc(60, 300, 30, 30, 40, 280, ArcType.CHORD); gc.fillArc(110, 300, 30, 30, 40, 280, ArcType.ROUND); gc.strokeArc(10, 340, 30, 30, 40, 280, ArcType.OPEN); gc.strokeArc(60, 340, 30, 30, 40, 280, ArcType.CHORD); gc.strokeArc(110, 340, 30, 30, 40, 280, ArcType.ROUND); gc.restore(); //绘制多边形 gc.save(); gc.setFill(Color.RED); gc.setStroke(Color.CHOCOLATE); gc.fillPolygon(new double[]{0, 40, 50, 60, 100, 70, 85, 50, 15, 30}, new double[]{440,440,400,440,440, 460,500,470,500,460}, 10); gc.strokePolygon(new double[]{0, 40, 50, 60, 100, 70, 85, 50, 15, 30}, new double[]{440,440,400,440,440, 460,500,470,500,460}, 10); gc.restore(); } }

基本图形的绘制其实跟Java和Android中都很类似，就不过多描述。save和restore也在这里进行了一下简单的应

用。

然后建立JavaFX的主类，将Canvas添加进根节点。

import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.stage.Stage; public class MainClass extends Application { private static final int WIDTH = 800; private static final int HEIGHT = 600; @Override public void start(Stage primaryStage) { MyCanvas mCanvas = new MyCanvas(WIDTH, HEIGHT); Group root = new Group(); root.getChildren().add(mCanvas); Scene scene = new Scene(root, WIDTH, HEIGHT); primaryStage.setTitle("JavaFX Canvas"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

我们来看看运行的效果：

这些只是基本的图形绘制，当然你也可以使用applyeffect来很容易的应用一些特效。

这都是需要我们自己进行灵活的运行来做出炫丽的效果。

那么Canvas的介绍就暂时到这里了。

转载请注明出处: