jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

dynamic canvas & Docs

Browse Source
This commit is contained in:
ckcz123 2018-12-17 15:41:23 +08:00
parent f26bc14bf1
commit fa6d503aac
8 changed files with 250 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
docs/api.md
View File

@ -473,12 +473,87 @@ core.maps.removeBlockByIds(floorId, ids)
ui.js主要用来进行UI窗口的绘制，比如对话框、怪物手册、楼传器、存读档界面等等。 ui.js主要用来进行UI窗口的绘制，比如对话框、怪物手册、楼传器、存读档界面等等。
core.ui.fillText(name, text, x, y, style, font)
在某个画布上绘制一段文字。
name为画布名，可以是系统画布之一，也可以是任意自定义动态创建的画布名。（下同）
text为要绘制的文本，x,y为要绘制的坐标，style可选为绘制的样式，font可选为绘制的字体。
core.ui.fillBoldText(canvas, text, style, x, y, font)
在某个画布上绘制一个描黑边的文字。
canvas为要绘制的画布的context，text为文本，style为颜色样式，x,y坐标，font可选为要绘制的字体。
core.ui.fillRect(name, x, y, width, height, style)
绘制一个矩形。style可选为绘制样式。
core.ui.strokeRect(name, x, y, width, height, style)
绘制一个矩形的边框。
core.ui.drawLine(name, x1, y1, x2, y2, style, lineWidth)
绘制一条线。lineWidth可选为线宽。
core.ui.drawArrow(name, x1, y1, x2, y2, style, lineWidth)
绘制一个箭头。
core.ui.setFont(name, font) / core.ui.setLineWidth(name, lineWidth)
设置一个画布的字体/线宽。
core.ui.setAlpha(name, font) / core.ui.setOpacity(name, font)
设置一个画布的绘制不透明度和画布本身的不透明度。
两者区别如下：
- setAlpha是设置"接下来绘制的内容的不透明度"，不会对已经绘制的内容产生影响。比如setAlpha('ui', 0.5)则会在接下来的绘制中使用0.5的不透明度。
- setOpacity是设置"画布本身的不透明度"，已经绘制的内容也会产生影响。比如我已经在UI层绘制了一段文字，再setOpacity则也会看起来变得透明。
尽量不要对系统画布使用setOpacity（因为会对已经绘制的内容产生影响），自定义创建的画布则不受此限制。
core.ui.setFillStyle(name, style) / core.ui.setStrokeStype(name, style)
设置一个画布的填充样式/描边样式。
core.ui.createCanvas(name, x, y, width, height, zIndex)
动态创建一个画布。name为要创建的画布名，如果已存在则会直接取用当前存在的。
x,y为创建的画布相对窗口左上角的像素坐标，width,height为创建的长宽。
zIndex为创建的纵向高度（关系到画布之间的覆盖），z值高的将覆盖z值低的；系统画布的z值可在个性化中查看。
创建一个画布后，可以通过 core.dymCanvas[name] 进行调用。
core.ui.findCanvas(name)
寻找一个自定义画布的索引；如果存在该画布则返回对应的索引，不存在画布则返回-1。
core.ui.relocateCanvas(name, x, y)
重新定位一个自定义画布。
core.ui.resizeCanvas(name, x, y)
重新设置一个自定义画布的大小。
core.ui.deleteCanvas(name)
删除一个自定义画布。
core.ui.deleteAllCanvas()
清空所有的自定义画布。
core.ui.drawThumbnail(floorId, canvas, blocks, x, y, size, heroLoc, heroIcon) core.ui.drawThumbnail(floorId, canvas, blocks, x, y, size, heroLoc, heroIcon)
绘制一个缩略图，比如楼传器界面，存读档界面等情况。 绘制一个缩略图，比如楼传器界面，存读档界面等情况。
floorId为目标楼层ID，canvas为要绘制到的图层，blocks为要绘制的所有图块。 floorId为目标楼层ID，canvas为要绘制到的图层，blocks为要绘制的所有图块。
x,y为该图层开始绘制的起始点坐标，size为每一格的像素，heroLoc为勇士坐标，heroIcon为勇士图标。 x,y为该图层开始绘制的起始点坐标，size为每一格的像素，heroLoc为勇士坐标，heroIcon为勇士图标。
========== core.utils.XXX 工具类的辅助函数 ========== ========== core.utils.XXX 工具类的辅助函数 ==========
utils.js主要用来进行一些辅助函数的计算。 utils.js主要用来进行一些辅助函数的计算。

1
docs/event.md
View File

@ -2200,6 +2200,7 @@ if (core.getFlag("door",0)==2) {
core.waitHeroToStop(function() { core.waitHeroToStop(function() {
core.removeGlobalAnimate(0,0,true); core.removeGlobalAnimate(0,0,true);
core.clearMap('all'); core.clearMap('curtain'); // 清空全地图 core.clearMap('all'); core.clearMap('curtain'); // 清空全地图
core.deleteAllCanvas();
core.drawText([ core.drawText([
"\t[恭喜通关]你的分数是${status:hp}。" "\t[恭喜通关]你的分数是${status:hp}。"
], function () { ], function () {

51
docs/personalization.md
View File

@ -8,21 +8,44 @@
HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们之间有一个覆盖关系，后面的图层将覆盖前面的图层。 HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们之间有一个覆盖关系，后面的图层将覆盖前面的图层。
所有图层从低往高依次如下：（加[B]的代表该层是大地图） 所有图层从低往高依次如下：（加[B]的代表该层是大地图，z-index代表该层的纵向高度）
- bg**[B]**：背景层；绘制背景图层素材bgmap，和背景贴图 - bg**[B]**：背景层；绘制背景图层素材bgmap，和背景贴图 (z-index: 10)
- event**[B]**：事件层；所有事件（道具、墙壁、NPC、怪物等）都绘制在这一层进行处理 - event**[B]**：事件层；所有事件（道具、墙壁、NPC、怪物等）都绘制在这一层进行处理 (z-index: 30)
- hero：勇士层；主要用来绘制勇士 - hero：勇士层；主要用来绘制勇士 (z-index: 40)
- event2**[B]**：事件2层；本层主要用来绘制48x32的图片素材的上半部分（避免和勇士错位） - event2**[B]**：事件2层；本层主要用来绘制48x32的图片素材的上半部分（避免和勇士错位） (z-index: 50)
- fg**[B]**：前景层；绘制前景图层素材fgmap，和前景贴图 - fg**[B]**：前景层；绘制前景图层素材fgmap，和前景贴图 (z-index: 60)
- damage**[B]**：显伤层；主要用来绘制怪物显伤和领域显伤 - damage**[B]**：显伤层；主要用来绘制怪物显伤和领域显伤 (z-index: 65)
- animate：动画层；主要用来绘制动画。 - animate：动画层；主要用来绘制动画。 (z-index: 70)
- weather：天气层；主要用来绘制天气（雨/雪/雾） - weather：天气层；主要用来绘制天气（雨/雪/雾） (z-index: 80)
- route**[B]**：路线层；主要用来绘制勇士的行走路线图，也用来绘制图块的淡入/淡出效果，图块的移动等。 - route**[B]**：路线层；主要用来绘制勇士的行走路线图。 (z-index: 95)
- curtain：色调层；用来控制当前楼层的画面色调 - curtain：色调层；用来控制当前楼层的画面色调 (z-index: 100)
- image：图片层；主要用来绘制显示图片；该层之所以在curtain层上是为了可以在全黑时贴大头像图 - ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等 (z-index: 160)
- ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等 - data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。 (z-index: 170)
- data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。
### 动态创建canvas
从V2.5.3开始，可以在H5样板中任意动态创建canvas并进行使用。
使用`core.createCanvas(name, x, y, w, h, z)`来动态创建一个画布。
其中name为动态canvas名称，x,y,w,h为创建的画布相对窗口左上角的像素坐标和长宽，z为画布的纵向高度。
例如：`core.createCanvas('test', 10, 20, 100, 200, 74)` 创建了一个名为test的画布，其左上角相对窗口的像素坐标为(10,20)，宽100高200，纵向高度74（在动画层和天气层之间）。
可以通过 `core.dymCanvas[name]` 来获得该画布的context；例如 `core.dymCanvas.test` 就是我们上面创建的画布的context，然后进行操作。
也可以简单的使用`core.fillText()`, `core.fillRect()`, `core.strokeRect()`等等对画布进行任意绘制。
``` js
core.fillText('test', '这是一段文字', 10, 30, '#FF0000', '16px Verdana'); // 绘制一段文本
```
使用 `core.deleteCanvas(name)` 删除一个动态创建的画布，例如 `core.deleteCanvas('test')`。
`core.deleteAllCanvas()`可以删除所有动态创建的画布，`core.relocateCanvas(name, x, y)`和`core.resizeCanvas(name, x, y)`可以对画布的位置和大小进行改变。
更多详细API请参见[API列表](api)。
## 自定义素材 ## 自定义素材

2
libs/control.js
View File

@ -288,6 +288,7 @@ control.prototype.showStartAnimate = function (noAnimate, callback) {
core.clearStatus(); core.clearStatus();
core.clearMap('all'); core.clearMap('all');
core.clearMap('curtain'); core.clearMap('curtain');
core.deleteAllCanvas();
// 重置音量 // 重置音量
core.events.setVolume(1, 0); core.events.setVolume(1, 0);
@ -355,6 +356,7 @@ control.prototype.clearStatus = function() {
} }
core.status = {}; core.status = {};
core.clearStatusBar(); core.clearStatusBar();
core.deleteAllCanvas();
core.status.played = false; core.status.played = false;
core.events.setHeroIcon('hero.png', true); core.events.setHeroIcon('hero.png', true);
} }

75
libs/core.js
View File

@ -631,68 +631,77 @@ core.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback,
} }
////// 清除地图 ////// ////// 清除地图 //////
core.prototype.clearMap = function (map, x, y, width, height) { core.prototype.clearMap = function (name, x, y, width, height) {
core.ui.clearMap(map, x, y, width, height); core.ui.clearMap(name, x, y, width, height);
} }
////// 在某个canvas上绘制一段文字 ////// ////// 在某个canvas上绘制一段文字 //////
core.prototype.fillText = function (map, text, x, y, style, font) { core.prototype.fillText = function (name, text, x, y, style, font) {
core.ui.fillText(map, text, x, y, style, font); core.ui.fillText(name, text, x, y, style, font);
}
////// 在某个canvas上绘制一段描边文字 //////
core.prototype.fillBoldText = function (canvas, text, style, x, y, font) {
core.ui.fillBoldText(canvas, text, style , x, y, font);
} }
////// 在某个canvas上绘制一个矩形 ////// ////// 在某个canvas上绘制一个矩形 //////
core.prototype.fillRect = function (map, x, y, width, height, style) { core.prototype.fillRect = function (name, x, y, width, height, style) {
core.ui.fillRect(map, x, y, width, height, style) core.ui.fillRect(name, x, y, width, height, style)
} }
////// 在某个canvas上绘制一个矩形的边框 ////// ////// 在某个canvas上绘制一个矩形的边框 //////
core.prototype.strokeRect = function (map, x, y, width, height, style, lineWidth) { core.prototype.strokeRect = function (name, x, y, width, height, style, lineWidth) {
core.ui.strokeRect(map, x, y, width, height, style, lineWidth) core.ui.strokeRect(name, x, y, width, height, style, lineWidth)
} }
////// 在某个canvas上绘制一条线 ////// ////// 在某个canvas上绘制一条线 //////
core.prototype.drawLine = function (map, x1, y1, x2, y2, style, lineWidth) { core.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) {
core.ui.drawLine(map, x1, y1, x2, y2, style, lineWidth); core.ui.drawLine(name, x1, y1, x2, y2, style, lineWidth);
}
////// 在某个canvas上绘制一个箭头 //////
core.prototype.drawArrow = function (name, x1, y1, x2, y2, style, lineWidth) {
core.ui.drawArrow(name, x1, y1, x2, y2, style, lineWidth);
} }
////// 设置某个canvas的文字字体 ////// ////// 设置某个canvas的文字字体 //////
core.prototype.setFont = function (map, font) { core.prototype.setFont = function (name, font) {
core.ui.setFont(map, font); core.ui.setFont(name, font);
} }
////// 设置某个canvas的线宽度 ////// ////// 设置某个canvas的线宽度 //////
core.prototype.setLineWidth = function (map, lineWidth) { core.prototype.setLineWidth = function (name, lineWidth) {
core.ui.setLineWidth(map, lineWidth); core.ui.setLineWidth(name, lineWidth);
} }
////// 保存某个canvas状态 ////// ////// 保存某个canvas状态 //////
core.prototype.saveCanvas = function (map) { core.prototype.saveCanvas = function (name) {
core.ui.saveCanvas(map); core.ui.saveCanvas(name);
} }
////// 加载某个canvas状态 ////// ////// 加载某个canvas状态 //////
core.prototype.loadCanvas = function (map) { core.prototype.loadCanvas = function (name) {
core.ui.loadCanvas(map); core.ui.loadCanvas(name);
} }
////// 设置某个canvas边框属性 //////
core.prototype.setStrokeStyle = function (map, style) {
core.ui.setStrokeStyle(map, style);
}
////// 设置某个canvas的alpha值 ////// ////// 设置某个canvas的alpha值 //////
core.prototype.setAlpha = function (map, alpha) { core.prototype.setAlpha = function (name, alpha) {
core.ui.setAlpha(map, alpha); core.ui.setAlpha(name, alpha);
} }
////// 设置某个canvas的透明度 ////// ////// 设置某个canvas的透明度 //////
core.prototype.setOpacity = function (map, opacity) { core.prototype.setOpacity = function (name, opacity) {
core.ui.setOpacity(map, opacity); core.ui.setOpacity(name, opacity);
} }
////// 设置某个canvas的绘制属性（如颜色等） ////// ////// 设置某个canvas的绘制属性（如颜色等） //////
core.prototype.setFillStyle = function (map, style) { core.prototype.setFillStyle = function (name, style) {
core.ui.setFillStyle(map, style); core.ui.setFillStyle(name, style);
}
////// 设置某个canvas的边框属性 //////
core.prototype.setStrokeStyle = function (name, style) {
core.ui.setStrokeStyle(name, style);
} }
////// canvas创建 ////// ////// canvas创建 //////
@ -719,7 +728,7 @@ core.prototype.resizeCanvas = function (name, width, height) {
core.prototype.deleteCanvas = function (name) { core.prototype.deleteCanvas = function (name) {
core.ui.deleteCanvas(name); core.ui.deleteCanvas(name);
} }
////// 删除所有canvas //////
core.prototype.deleteAllCanvas = function () { core.prototype.deleteAllCanvas = function () {
core.ui.deleteAllCanvas(); core.ui.deleteAllCanvas();
} }
@ -898,10 +907,6 @@ core.prototype.updateDamage = function () {
core.control.updateDamage(); core.control.updateDamage();
} }
core.prototype.fillBoldText = function (canvas, text, color, x, y, font) {
core.ui.fillBoldText(canvas, text, color, x, y, font);
}
////// 测试是否拥有某个特殊属性 ////// ////// 测试是否拥有某个特殊属性 //////
core.prototype.hasSpecial = function (special, test) { core.prototype.hasSpecial = function (special, test) {
return core.enemys.hasSpecial(special, test); return core.enemys.hasSpecial(special, test);

1
libs/events.js
View File

@ -122,6 +122,7 @@ events.prototype.startGame = function (hard, seed, route, callback) {
core.clearMap('all'); core.clearMap('all');
core.clearMap('curtain'); core.clearMap('curtain');
core.deleteAllCanvas();
core.clearStatusBar(); core.clearStatusBar();
var post_start = function () { var post_start = function () {

184
libs/ui.js
View File

@ -17,9 +17,17 @@ ui.prototype.init = function () {
////////////////// 地图设置 ////////////////// 地图设置
ui.prototype.getContextByName = function (name) {
if (core.isset(core.canvas[name]))
return core.canvas[name];
if (core.isset(core.dymCanvas[name]))
return core.dymCanvas[name];
return null;
}
////// 清除地图 ////// ////// 清除地图 //////
ui.prototype.clearMap = function (map, x, y, width, height) { ui.prototype.clearMap = function (name, x, y, width, height) {
if (map == 'all') { if (name == 'all') {
for (var m in core.canvas) { for (var m in core.canvas) {
// 不擦除curtain层 // 不擦除curtain层
if (m=='curtain') continue; if (m=='curtain') continue;
@ -28,168 +36,144 @@ ui.prototype.clearMap = function (map, x, y, width, height) {
core.dom.gif.innerHTML = ""; core.dom.gif.innerHTML = "";
} }
else { else {
core.canvas[map].clearRect(x||0, y||0, width||core.bigmap.width*32, height||core.bigmap.height*32); var ctx = this.getContextByName(name);
if (ctx) ctx.clearRect(x||0, y||0, width||ctx.canvas.width, height||ctx.canvas.height);
} }
} }
////// 在某个canvas上绘制一段文字 ////// ////// 在某个canvas上绘制一段文字 //////
ui.prototype.fillText = function (map, text, x, y, style, font) { ui.prototype.fillText = function (name, text, x, y, style, font) {
if (core.isset(style)) { if (core.isset(style)) {
core.setFillStyle(map, style); core.setFillStyle(name, style);
} }
if (core.isset(font)) { if (core.isset(font)) {
core.setFont(map, font); core.setFont(name, font);
} }
core.canvas[map].fillText(text, x, y); var ctx = this.getContextByName(name);
if (ctx) ctx.fillText(text, x, y);
} }
////// 在某个canvas上绘制粗体 ////// ////// 在某个canvas上绘制粗体 //////
ui.prototype.fillBoldText = function (canvas, text, color, x, y, font) { ui.prototype.fillBoldText = function (canvas, text, style, x, y, font) {
if (core.isset(font)) canvas.font = font; if (core.isset(font)) canvas.font = font;
canvas.fillStyle = '#000000'; canvas.fillStyle = '#000000';
canvas.fillText(text, x-1, y-1); canvas.fillText(text, x-1, y-1);
canvas.fillText(text, x-1, y+1); canvas.fillText(text, x-1, y+1);
canvas.fillText(text, x+1, y-1); canvas.fillText(text, x+1, y-1);
canvas.fillText(text, x+1, y+1); canvas.fillText(text, x+1, y+1);
canvas.fillStyle = color; canvas.fillStyle = style;
canvas.fillText(text, x, y); canvas.fillText(text, x, y);
} }
////// 在某个canvas上绘制一个矩形 ////// ////// 在某个canvas上绘制一个矩形 //////
ui.prototype.fillRect = function (map, x, y, width, height, style) { ui.prototype.fillRect = function (name, x, y, width, height, style) {
if (core.isset(style)) { if (core.isset(style)) {
core.setFillStyle(map, style); core.setFillStyle(name, style);
} }
core.canvas[map].fillRect(x, y, width, height); var ctx = this.getContextByName(name);
if (ctx) ctx.fillRect(x, y, width, height);
} }
////// 在某个canvas上绘制一个矩形的边框 ////// ////// 在某个canvas上绘制一个矩形的边框 //////
ui.prototype.strokeRect = function (map, x, y, width, height, style, lineWidth) { ui.prototype.strokeRect = function (name, x, y, width, height, style, lineWidth) {
if (core.isset(style)) { if (core.isset(style)) {
core.setStrokeStyle(map, style); core.setStrokeStyle(name, style);
} }
if (core.isset(lineWidth)) { if (core.isset(lineWidth)) {
core.setLineWidth(map, lineWidth); core.setLineWidth(name, lineWidth);
} }
core.canvas[map].strokeRect(x, y, width, height); var ctx = this.getContextByName(name);
if (ctx) ctx.strokeRect(x, y, width, height);
} }
////// 在某个canvas上绘制一条线 ////// ////// 在某个canvas上绘制一条线 //////
ui.prototype.drawLine = function (map, x1, y1, x2, y2, style, lineWidth) { ui.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) {
if (core.isset(style)) { if (core.isset(style)) {
core.setStrokeStyle(map, style); core.setStrokeStyle(name, style);
} }
if (core.isset(lineWidth)) { if (core.isset(lineWidth)) {
core.setLineWidth(map, lineWidth); core.setLineWidth(name, lineWidth);
}
var ctx = this.getContextByName(name);
if (ctx) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
} }
core.canvas[map].beginPath();
core.canvas[map].moveTo(x1, y1);
core.canvas[map].lineTo(x2, y2);
core.canvas[map].stroke();
} }
////// 在某个canvas上绘制一个箭头 ////// ////// 在某个canvas上绘制一个箭头 //////
ui.prototype.drawArrow = function (map, x1, y1, x2, y2, style, lineWidth) { ui.prototype.drawArrow = function (name, x1, y1, x2, y2, style, lineWidth) {
if (x1==x2 && y1==y2) return; if (x1==x2 && y1==y2) return;
if (core.isset(style)) { if (core.isset(style)) {
core.setStrokeStyle(map, style); core.setStrokeStyle(name, style);
} }
if (core.isset(lineWidth)) { if (core.isset(lineWidth)) {
core.setLineWidth(map, lineWidth); core.setLineWidth(name, lineWidth);
}
var ctx = this.getContextByName(name);
if (ctx) {
var head = 10;
var dx = x2-x1, dy=y2-y1;
var angle = Math.atan2(dy,dx);
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x2-head*Math.cos(angle-Math.PI/6),y2-head*Math.sin(angle-Math.PI/6));
ctx.moveTo(x2, y2);
ctx.lineTo(x2-head*Math.cos(angle+Math.PI/6),y2-head*Math.sin(angle+Math.PI/6));
ctx.stroke();
} }
var head = 10;
var dx = x2-x1, dy=y2-y1;
var angle = Math.atan2(dy,dx);
core.canvas[map].beginPath();
core.canvas[map].moveTo(x1,y1);
core.canvas[map].lineTo(x2, y2);
core.canvas[map].lineTo(x2-head*Math.cos(angle-Math.PI/6),y2-head*Math.sin(angle-Math.PI/6));
core.canvas[map].moveTo(x2, y2);
core.canvas[map].lineTo(x2-head*Math.cos(angle+Math.PI/6),y2-head*Math.sin(angle+Math.PI/6));
core.canvas[map].stroke();
} }
////// 设置某个canvas的文字字体 ////// ////// 设置某个canvas的文字字体 //////
ui.prototype.setFont = function (map, font) { ui.prototype.setFont = function (name, font) {
core.canvas[map].font = font; var ctx = this.getContextByName(name);
if (ctx) ctx.font = font;
} }
////// 设置某个canvas的线宽度 ////// ////// 设置某个canvas的线宽度 //////
ui.prototype.setLineWidth = function (map, lineWidth) { ui.prototype.setLineWidth = function (name, lineWidth) {
if (map == 'all') { var ctx = this.getContextByName(name);
for (var m in core.canvas) { if (ctx) ctx.lineWidth = lineWidth;
core.canvas[m].lineWidth = lineWidth;
}
}
core.canvas[map].lineWidth = lineWidth;
} }
////// 保存某个canvas状态 ////// ////// 保存某个canvas状态 //////
ui.prototype.saveCanvas = function (map) { ui.prototype.saveCanvas = function (name) {
core.canvas[map].save(); var ctx = this.getContextByName(name);
if (ctx) ctx.save();
} }
////// 加载某个canvas状态 ////// ////// 加载某个canvas状态 //////
ui.prototype.loadCanvas = function (map) { ui.prototype.loadCanvas = function (name) {
core.canvas[map].restore(); var ctx = this.getContextByName(name);
} if (ctx) ctx.restore();
////// 设置某个canvas边框属性 //////
ui.prototype.setStrokeStyle = function (map, style) {
if (map == 'all') {
for (var m in core.canvas) {
core.canvas[m].strokeStyle = style;
}
}
else {
core.canvas[map].strokeStyle = style;
}
} }
////// 设置某个canvas的alpha值 ////// ////// 设置某个canvas的alpha值 //////
ui.prototype.setAlpha = function (map, alpha) { ui.prototype.setAlpha = function (name, alpha) {
if (map == 'all') { var ctx = this.getContextByName(name);
for (var m in core.canvas) { if (ctx) ctx.globalAlpha = alpha;
core.canvas[m].globalAlpha = alpha;
}
}
else core.canvas[map].globalAlpha = alpha;
} }
////// 设置某个canvas的透明度；尽量不要使用本函数，而是全部换成setAlpha实现 ////// ////// 设置某个canvas的透明度；尽量不要使用本函数，而是全部换成setAlpha实现 //////
ui.prototype.setOpacity = function (map, opacity) { ui.prototype.setOpacity = function (name, opacity) {
if (map == 'all') { var ctx = this.getContextByName(name);
for (var m in core.canvas) { if (ctx) ctx.canvas.style.opacity = opacity;
core.canvas[m].canvas.style.opacity = opacity;
}
}
else if (core.isset(core.canvas[map])) {
core.canvas[map].canvas.style.opacity = opacity;
}
else if (core.isset(core.dymCanvas[map])) {
core.dymCanvas[map].canvas.style.opacity = opacity;
}
else
console.log("未找到"+map);
} }
////// 设置某个canvas的绘制属性（如颜色等） ////// ////// 设置某个canvas的绘制属性（如颜色等） //////
ui.prototype.setFillStyle = function (map, style) { ui.prototype.setFillStyle = function (name, style) {
if (map == 'all') { var ctx = this.getContextByName(name);
for (var m in core.canvas) { if (ctx) ctx.fillStyle = style;
core.canvas[m].fillStyle = style;
}
}
else if (core.isset(core.canvas[map])) {
core.canvas[map].fillStyle = style;
}
else if (core.isset(core.dymCanvas[map])) {
core.dymCanvas[map].fillStyle = style;
}
else
console.log("未找到"+map);
} }
////// 设置某个canvas边框属性 //////
ui.prototype.setStrokeStyle = function (name, style) {
var ctx = this.getContextByName(name);
if (ctx) ctx.strokeStyle = style;
}
///////////////// UI绘制 ///////////////// UI绘制
@ -2784,6 +2768,14 @@ ui.prototype.drawHelp = function () {
////// canvas创建 ////// ////// canvas创建 //////
ui.prototype.createCanvas = function (name, x, y, width, height, z) { ui.prototype.createCanvas = function (name, x, y, width, height, z) {
// 如果画布已存在则直接调用
var cv = this.findCanvas(name);
if (cv!=-1) {
this.relocateCanvas(name, x, y);
this.resizeCanvas(name, width, height);
core.dymCanvas[name].canvas.style.zIndex = z;
return;
}
var newCanvas = document.createElement("canvas"); var newCanvas = document.createElement("canvas");
newCanvas.id = name; newCanvas.id = name;
newCanvas.style.display = 'block'; newCanvas.style.display = 'block';

8
project/functions.js
View File

@ -60,6 +60,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
core.waitHeroToStop(function() { core.waitHeroToStop(function() {
core.removeGlobalAnimate(0,0,true); core.removeGlobalAnimate(0,0,true);
core.clearMap('all'); core.clearMap('curtain'); // 清空全地图 core.clearMap('all'); core.clearMap('curtain'); // 清空全地图
core.deleteAllCanvas();
// 请注意： // 请注意：
// 成绩统计时是按照hp进行上传并排名，因此光在这里改${status:hp}是无效的 // 成绩统计时是按照hp进行上传并排名，因此光在这里改${status:hp}是无效的
// 如需按照其他的的分数统计方式，请先将hp设置为你的得分 // 如需按照其他的的分数统计方式，请先将hp设置为你的得分
@ -1207,8 +1208,11 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
// core.plugin.drawLight(0.9, [[25,11,46],[105,121,88],[301,221,106]]); // 存在三个灯光效果，分别是中心(25,11)半径46，中心(105,121)半径88，中心(301,221)半径106。 // core.plugin.drawLight(0.9, [[25,11,46],[105,121,88],[301,221,106]]); // 存在三个灯光效果，分别是中心(25,11)半径46，中心(105,121)半径88，中心(301,221)半径106。
// core.plugin.drawLight([0,0,255,0.3], [[25,11,46],[105,121,88,0.2]], 0.4); // 存在两个灯光效果，它们在内圈40%范围内保持全亮，且40%后才开始衰减。 // core.plugin.drawLight([0,0,255,0.3], [[25,11,46],[105,121,88,0.2]], 0.4); // 存在两个灯光效果，它们在内圈40%范围内保持全亮，且40%后才开始衰减。
this.drawLight = function (color, lights, lightDec) { this.drawLight = function (color, lights, lightDec) {
// 清空色调层；也可以修改成其它层比如animate层，或者用自己创建的canvas // 清空色调层；也可以修改成其它层比如animate/weather层，或者用自己创建的canvas
var ctx = core.canvas.curtain; var canvasName = 'curtain';
var ctx = core.ui.getContextByName(canvasName);
if (ctx == null) return;
ctx.mozImageSmoothingEnabled = false; ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false;