相关疑难解决方法(0)

我有2个画布,一个使用HTML属性width并height调整大小,另一个使用CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1显示它应该,但不是compteur2.内容使用300x300画布上的JavaScript绘制.

为什么会有显示差异？

根据此页面,任何DOM元素都可以调整大小:http://jqueryui.com/demos/resizable/

但是,似乎这对CANVAS元素不起作用.可能？

我觉得有点好玩,我会看看画布.绘制一个盒子似乎相当容易,所以我几乎从mozilla开发者网站复制了一个例子.你可以在这里看到它:http://jsfiddle.net/Wolfy87/DZBwp/

正如你所看到的,它已经扭曲了.有没有人有任何想法？我设置相同的x/y和相同的宽度/高度.它应该是一个盒子,对吗？

我想在画布上从jpg文件中绘制一个图像.我的代码:

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0);
  };
  imageObj.src = 'img/my_image.jpg';

问题是画布上的图像比文件中的图像大得多.为什么？如何绘制实际尺寸的图像？

更新:结果:http://jsfiddle.net/AJK2t/

有没有办法将HTML画布缩放到浏览器窗口宽度/高度但不缩放其中的内容？假设我正在创建小行星并希望使用整个浏览器窗口,但是当我调整窗口大小时,不希望岩石和船只向上/向下扩展.

我正在尝试使用getUserMedia从用户的网络摄像头拍摄照片.

来自相机的图像是640x480(可能是任何尺寸,具体取决于用户的网络摄像头).

我有一个视频标签,大小为320x240与css,我即时渲染网络摄像头图像,如下所示:

var $video = $('video');
navigator.getUserMedia({ video: true }, function (stream) {
    $video[0].mozSrcObject = stream;
    $video[0].play();
    localMediaStream = stream;
}, function () {
    console.log('sadtrombone.com');
});

这很好用.

然后,即时拍照/静止帧如下:

var ctx = $canvas[0].getContext('2d');
ctx.drawImage($video[0], 0, 0, $canvas[0].width, $canvas[0].height);

这会将图像绘制到画布上,但看起来有点模糊:/

那么,如果我这样做:

$('img).attr('src', $canvas[0].toDataURL('image/png'));

这会将画布渲染为图像元素,但图像被压扁,其300x150:/

$canvas[0].width == 300 和 $canvas[0].height == 150

这是怎么回事？

更新:有趣/奇怪 - 如果我这样做:

ctx.drawImage($video[0], 0, 0, 320, 240);

我仍然最终得到一张300x150的图像,但是它的裁剪.虽然它看起来确实是来自源的正确宽高比

更新2:即使是陌生人,如果我这样做:

ctx.drawImage($video[0], 0, 0, 640, 480);

我仍然最终得到一张300x150的图像,但它的左上角是图像:'(