GWT和HTML5 Canvas演示

这是我对GWT和HTML5 Canvas的第一个实验。我的第一个尝试是创建矩形，仅用几行代码就得出了这样的内容：

码：

public class GwtHtml5 implements EntryPoint {static final String canvasHolderId = "canvasholder";static final String unsupportedBrowser = "Your browser does not support the HTML5 Canvas";static final int height = 400;static final int width = 500;final CssColor colorRed = CssColor.make("red");final CssColor colorGreen = CssColor.make("green");final CssColor colorBlue = CssColor.make("blue");Canvas canvas;Context2d context;public void onModuleLoad() {canvas = Canvas.createIfSupported();if (canvas == null) {RootPanel.get(canvasHolderId).add(new Label(unsupportedBrowser));return;}createCanvas();}private void createCanvas(){canvas.setWidth(width + "px");canvas.setHeight(height + "px");canvas.setCoordinateSpaceWidth(width);canvas.setCoordinateSpaceHeight(height);RootPanel.get(canvasHolderId).add(canvas);context = canvas.getContext2d();context.beginPath();context.setFillStyle(colorRed);context.fillRect(100, 50, 100, 100);context.setFillStyle(colorGreen);context.fillRect(200, 150, 100, 100);context.setFillStyle(colorBlue);context.fillRect(300, 250, 100, 100);context.closePath();}}

我的Spring Ball尝试了一些我在Web上找到的代码。

参考：来自GlyphSoft博客的JCG合作伙伴 Mark Anro Silva的GWT和HTML5 Canvas演示。

翻译自: https://www.javacodegeeks.com/2012/05/gwt-and-html5-canvas-demo.html

GWT和HTML5 Canvas演示相关推荐

gwt 嵌入html_GWT和HTML5画布演示
gwt 嵌入html 这是我对GWT和HTML5 Canvas的第一个实验. 我的第一个尝试是创建矩形,仅用几行代码就得出了这样的内容: 码: public class GwtHtml5 implem ...
HTML5 Canvas平移，放缩，旋转演示
HTML5 Canvas中提供了实现图形平移,旋转,放缩的API. 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变 ...
HTML5 Canvas圆盘抽奖应用DEMO演示
我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等.这些抽奖活动部分就是由HTML5的Canvas来制作的,今天就为大家分享一下如何使用 ...
HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
html5使用阴影,HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = "red" 表示设置阴影颜色为红色 ...
html5 canvas雨点打到窗玻璃动画
html5 canvas雨点打到窗玻璃动画 HTML5下雨效果效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: 1 <!doctype h ...
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
如何使用HTML5 Canvas元素来裁剪图像
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动.调整大小和裁剪图像,这些技术适用于图片编辑器.照片分享等应用场景.借助HTML5 Canvas绘图功能,可以在浏览器端以比较简 ...
HTML5 canvas 在线画笔绘图工具（三）
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

GWT和HTML5 Canvas演示

GWT和HTML5 Canvas演示相关推荐

最新文章

热门文章