标签: html5-canvas

我想用图像填充像圆形或自定义路径的路径,但想要拉伸图像,以便图像的像素不会位于闭合路径之外.这可以使用Canvas对象在HTML5中实现吗？

这是我的自定义路径:

ctx.beginPath();
    ctx.moveTo(170, 80);
    ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
    ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
    ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
    ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
    ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
    ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);

    // complete custom shape
    ctx.closePath();
    ctx.lineWidth = 5;

    ctx.fillStyle = '#8ED6FF';
    ctx.fill();

    ctx.strokeStyle = 'blue';
    ctx.stroke();

我想要实现的是用图像填充云,但要拉伸它.如果它看起来很难看并不重要.

我试图通过谷歌应用程序引擎通道api从画布发送图像到另一个客户端,然后将显示相同的图像.正在接收消息但未显示图像.

在发送方:

var image = context.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
var buffer = new ArrayBuffer(image.data.length);
var bytes = new Uint8Array(buffer);
for (var i=0; i<bytes.length; i++) {
    bytes[i] = image.data[i];
}

sendMessage({image: buffer});

在另一端渲染数据:

var bytes = new Uint8Array(buffer.size);
var image = context.createImageData(imageCanvas.width, imageCanvas.height);
for (var i=0; i<image.length; i++) {
    image.data[i] = bytes[i];
}
context.drawImage(image, 0, 0);

控制台一直说最后一行有一个Type错误.

我想创建一个媒体查询来更改canvas标签的宽度和高度.

HTML

<canvas id="clock" width="250" height="250">
</canvas>

我希望以通常的方式声明width和height属性.但这似乎不起作用:

CSS

#clock {
    width:250;
    height:250; 
}

@media (max-width: @screen-small) {
    #clock {
        width:200;
        height:200;
    }
}

我错过了什么？

我见过人们使用多个画布而不是一个画布.为什么？有更好的表现吗？我没有看到太大的区别.

我最近一直在使用HTML5画布，想知道是否有一种方法可以用图像而不是纯色填充文本？

我目前可以得到类似的工作：

但是我需要文本看起来像（可以在Photoshop中完成）：

我读过很多遍关于有时必须在第二个画布上的图像上渲染零件并将图形导入到主要可见的画布中的信息，但大部分内容都是关于为图像着色（不确定是否可以在此处使用）。

我为什么需要这个：如您所见，上面的控制器很漂亮而且很灵巧，但是文本不是，客户希望我从不同的控制器外壳颜色中提取文本颜色，以使其看起来尽可能逼真。

在搜索更多内容时，我确实找到了这个示例，这正是我想要的。但不幸的是，该示例的问题在于我将需要以某种方式仅导出图像的文本，而我认为这是不可能的，因此可以将其转换为新图像，而黑色外层不会覆盖图像的一部分。控制器。

如果有人希望以正确的方向发送给我，无论多么复杂，我将不胜感激。

PS这里是控制器的绘制顺序：

1. 贝壳
2. 文本
3. 零件/背部
4. 拇指棒
5. 引导按钮
6. ABXY按钮
7. 控制器周围的遮罩（防止文本溢出）

我试图做一个简单的突围赛象这样.我正在使用HTML5 Canvas + JavaScript.

我的问题是我不知道如何添加多个块(有效).

我可以加一个; 但是我不能在不改变这个的情况下添加另一个:

var block = {
    width: 75,
    height: 20,
    x: 212,
    y: 0
};

ctx.fillRect(block.x, block.y, block.width, block.height);

对此:

var block2 = {
    width: 75,
    height: 20,
    x: 300,
    y: 0
};
ctx.fillRect(block2.x, block2.y, block2.width, block2.height);

必须有一种比手动创建新变量和使用ctx.fillRect游戏中每个块更好的方法.如果有人能告诉我如何,我将非常感谢,谢谢!

请查看此JSFiddle以供参考:http://jsfiddle.net/3hEJJ/1/

使用HTML5画布,这将是开始在随机轨迹中移动我的3个球的最佳位置(沿着平滑的线,没有跳跃),当它们相互撞击时反弹然后继续沿着另一条路径行进,直到它们再次相互撞击并且再次反弹.

到目前为止,我已经在jsfiddle 上设置了一个简单的例子,其中每个球都遵循自己的路径(尽管它们会从屏幕上消失).

目前,轨迹非常简单

function animate(){

  // Yellow Circle
  circles[0].x+=1;
  circles[0].y+=-1.5;

  // Blue Cirlce
  circles[1].x+=-1;
  circles[1].y+=-1.5;

  // Red Circle
  circles[2].x+=1;
  circles[2].y+=-1;
  draw();

 }

我很想看到一个例子,但也想知道我应该看什么方法和计算

任何帮助赞赏

谢谢

我正在尝试使用JavaScript在画布上绘制框; 我的代码工作,但我的数组有问题.假设我有一个多维数组调用map,它被声明如下:

var map = [ [0,1,1], [0,0,1], [0,1,1], ];

1框在哪里并且0是空格,但是当我运行我的代码时,输​​出如下所示:

0,0,0 1,0,1 1,1,1

有没有办法解决这个问题,以便输出匹配map？我的代码看起来像这样:

var canvas = null;
var ctx = null;
var x,y,count,inc,ax,ay;


var map = [
    [0,0,0],
    [1,0,1],
    [1,1,1],
];

window.onload = function () {
    canvas = document.getElementById("gameArea");
    ctx = canvas.getContext("2d");
    y=0;
    x=0;
    ax=0;
    ay=0;
    count=0;
    inc=0;

    for(;count<3;count++){
        if(count>0){
            inc = inc + 40;
            console.log("inc:"+inc);
            console.log();
        }

        ay=count;
        console.log("ay:"+ay);
        console.log();

        y = y + inc;
        console.log("y:"+y);
        console.log();

        for(;ax<3;x=x+40,ax++){
            if(map[ax][ay]==1){
                console.log(ax+","+ay) …

我需要使用图像的矩形区域获得平均颜色JavaScript.

我尝试过使用tracking.js但不允许指定区域而不是单个像素.

我使用Tiled（3200 x 3200像素）创建了简单的tilemap。我使用此库将其加载到画布上

我每个秒钟绘制整个图块3200 x 3200 60次。我试图四处走动，但效果很好。顺便说一句，我使用ctx.translate在画布上移动。我将此包含在自己的函数中

但是，当我在Tiled中创建较大的地图（32000 x 32000像素）时，页面变得非常冻结。我无法快速走动，我认为大约有10 fps

那么如何解决呢？我必须每秒调用drawTiles（）函数60次。但是，有什么方法可以只绘制瓷砖的可见部分吗？就像只画出我在屏幕上看到的内容（我猜是0、0，monitorWidth，monitorHeight）

谢谢