标签: canvas

没有任何扩展库,是否可以在同一个canvas元素中有多个图层？

所以,如果我在顶层执行clearRect,它将不会删除底层？

谢谢.

是否可以修复HTML5 canvas元素的宽度和高度？

通常的方法如下:

<canvas id="canvas" width="300" height="300"></canvas>

地图

我正在使用Javascript制作基于图块的RPG,使用perlin噪声高度图,然后根据噪声的高度指定一个图块类型.

地图最终看起来像这样(在迷你地图视图中).

我有一个相当简单的算法,它从图像上的每个像素中提取颜色值,并根据其在(0-255)之间的位置将其转换为整数(0-5),该位置对应于图块字典中的图块.然后将此200x200阵列传递给客户端.

然后,引擎根据数组中的值确定切片并将其绘制到画布.所以,我最终得到了具有现实主义特征的有趣世界:山脉,海洋等.

现在我要做的下一件事就是应用某种混合算法,如果邻居不是同一类型的话,会使得瓷砖无缝地融合到它们的邻居中.上面的示例地图是玩家在小地图中看到的内容.屏幕上他们看到标有白色矩形的部分的渲染版本; 使用图像而不是单色像素渲染切片的位置.

这是用户在地图中看到的内容的示例,但它与上面显示的视口的位置不同!

在这种观点中,我希望过渡发生.

算法

我想出了一个简单的算法,它将遍历视口中的地图,并在每个图块的顶部渲染另一个图像,前提是它位于不同类型的图块旁边.(不改变地图!只是渲染一些额外的图像.)算法的想法是分析当前tile的邻居:

这是引擎可能必须呈现的示例场景,其中当前图块是标记为X的图块.

创建一个3x3数组,并读入它周围的值.所以对于这个例子,数组看起来像.

[
    [1,2,2]
    [1,2,2]
    [1,1,2]
];

我的想法是为可能的瓷砖配置制定一系列案例.在一个非常简单的层面上:

if(profile[0][1] != profile[1][1]){
     //draw a tile which is half sand and half transparent
     //Over the current tile -> profile[1][1]
     ...
}

这给出了这个结果:

其工作方式的转变,从[0][1]到[1][1],但不能从[1][1]到[2][1],其中硬边仍然存在.所以我认为在那种情况下必须使用角落瓷砖.我创建了两个3x3精灵表,我认为它可以容纳所有可能需要的拼贴组合.然后我为游戏中的所有瓷砖复制了这个(白色区域是透明的).对于每种类型的瓷砖,最终会有16个瓷砖(不使用每个spritesheet上的中心瓷砖.)

理想的结果

因此,使用这些新的磁贴和正确的算法,示例部分将如下所示:

尽管如此,我所做的每一次尝试都失败了,算法总会有一些缺陷,模式最终会变得奇怪.我似乎无法让所有案例都正确,总体而言,这似乎是一种糟糕的做法.

一个办法？

那么,如果有人能提供一个替代解决方案,我将如何创建这种效果,或者编写分析算法的方向,那么我将非常感激!

任何人都知道如何做到这一点？你会使用canvas对象,svg,jQuery等吗？

我有以下工作代码:

ctx = document.getElementById("canvas").getContext('2d');

有没有办法重新编写使用$？这样做失败了:

ctx = $("#canvas").getContext('2d');

我使用html5 canvas元素在浏览器中调整图像大小.事实证明,质量非常低.我发现:在缩放<canvas>时禁用插值,但它无助于提高质量.

下面是我的css和js代码,以及用Photoshop调整并在画布API中缩放的图像.

在浏览器中缩放图像时,我需要做些什么才能获得最佳质量？

注意:我想将大图像缩小到一个小图像,修改画布中的颜色并将结果从画布发送到服务器.

CSS:

canvas, img {
    image-rendering: optimizeQuality;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

JS:

var $img = $('<img>');
var $originalCanvas = $('<canvas>');
$img.load(function() {


   var originalContext = $originalCanvas[0].getContext('2d');   
   originalContext.imageSmoothingEnabled = false;
   originalContext.webkitImageSmoothingEnabled = false;
   originalContext.mozImageSmoothingEnabled = false;
   originalContext.drawImage(this, 0, 0, 379, 500);
});

使用photoshop调整图像大小:

图像在画布上调整大小:

编辑:

我尝试按照以下方案中提出的多个步骤进行缩减:

调整HTML5画布和 Html5画布中的图像大小drawImage:如何应用抗锯齿

这是我用过的功能:

function resizeCanvasImage(img, canvas, maxWidth, maxHeight) {
    var imgWidth = img.width, 
        imgHeight = img.height;

    var ratio = 1, ratio1 …

是否可以在HTML5上写文字canvas？

我希望能够在HTML 5画布中放大鼠标下的点,例如放大Google地图.我怎样才能做到这一点？

我正在尝试创建一个占用视口宽度和高度100%的画布元素.

你可以在我的例子看到这里正在发生,但它是在Chrome和FireFox中添加滚动条.如何防止额外的滚动条,只提供窗口的宽度和高度作为画布的大小？

规范有一个context.measureText(文本)函数,它将告诉你打印该文本需要多少宽度,但我找不到一种方法来找出它有多高.我知道它基于字体,但我不知道将字体字符串转换为文本高度.