标签: canvas

在尝试复合操作和在画布上绘制图像后,我现在正在尝试删除图像和合成.我该怎么做呢？

我需要清除画布以重绘其他图像; 这可以持续一段时间所以我不认为每次绘制一个新的矩形将是最有效的选择.

Google的"报告错误"或"反馈工具"可让您选择浏览器窗口的某个区域,以创建提交的屏幕截图,其中包含有关错误的反馈.

_{Jason Small截图,发布在一个重复的问题.}

他们是怎么做到的？谷歌的JavaScript反馈API从此处加载,他们对反馈模块的概述将演示屏幕截图功能.

是否可以捕获或打印html画布中显示的图像或pdf？

我想通过画布生成一个图像,并能够从该图像生成一个png.

我正在尝试使用javascript和canvas元素在客户端创建缩略图图像,但是当我缩小图像时,它看起来很糟糕.它看起来好像在photoshop中缩小了,重新采样设置为"最近邻"而不是Bicubic.我知道可以让它看起来正确,因为这个网站也可以使用画布做得很好.我尝试使用他们所做的相同代码,如"[Source]"链接所示,但它仍然看起来很糟糕.有什么我缺少的东西,一些需要设置的设置或什么？

编辑:

我正在尝试调整jpg的大小.我已经尝试在链接网站和photoshop中调整相同的jpg,并且在缩小尺寸时看起来很好.

这是相关代码:

reader.onloadend = function(e)
{
    var img = new Image();
    var ctx = canvas.getContext("2d");
    var canvasCopy = document.createElement("canvas");
    var copyContext = canvasCopy.getContext("2d");

    img.onload = function()
    {
        var ratio = 1;

        if(img.width > maxWidth)
            ratio = maxWidth / img.width;
        else if(img.height > maxHeight)
            ratio = maxHeight / img.height;

        canvasCopy.width = img.width;
        canvasCopy.height = img.height;
        copyContext.drawImage(img, 0, 0);

        canvas.width = img.width * ratio;
        canvas.height = img.height * ratio;
        ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); …

将单击事件处理程序添加到将返回单击的x和y坐标(相对于canvas元素)的canvas元素的最简单方法是什么？

不需要传统的浏览器兼容性,Safari,Opera和Firefox都可以.

我想要一个有一个居中单词的网页.

我想用动画绘制这个单词,这样页面就会以与我们相同的方式"写出"单词,即它从一个点开始,随着时间的推移绘制直线和曲线,使得最终结果是一个字形.

我不在乎这是用<canvas>DOM还是DOM 完成的,我不关心它是用JavaScript还是CSS完成的.没有jQuery会很好,但不是必需的.

我怎样才能做到这一点？我没有运气就进行了详尽的搜索.

请原谅这个有趣的头衔.我已经创建了一个200个球弹跳和碰撞的小图形演示,两个都在墙壁和彼此之间.您可以在此处查看我目前所拥有的内容:http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/

问题是,每当它们相互碰撞时,它们就会消失.我不知道为什么.有人可以看看并帮助我吗？

更新:显然球阵列有坐标为NaN的球.下面是我将球推到阵列的代码.我不完全确定坐标是如何获得NaN的.

// Variables
var numBalls = 200;  // number of balls
var maxSize = 15;
var minSize = 5;
var maxSpeed = maxSize + 5;
var balls = new Array();
var tempBall;
var tempX;
var tempY;
var tempSpeed;
var tempAngle;
var tempRadius;
var tempRadians;
var tempVelocityX;
var tempVelocityY;

// Find spots to place each ball so none start on top of each other
for (var i = 0; i < numBalls; i += 1) { …

使用HTML5 <canvas>元素,我想加载一个图像文件(PNG,JPEG等),完全透明地将它绘制到画布上,然后将其淡入.我已经想出如何加载图像并将其绘制到帆布,但我不知道如何绘制它的不透明度.

这是我到目前为止的代码:

var canvas = document.getElementById('myCanvas');

if (canvas.getContext)
{
    var c           = canvas.getContext('2d');
    c.globalAlpha   = 0;

    var img     = new Image();
    img.onload  = function() {
        c.drawImage(img, 0, 0);
    }
    img.src     = 'image.jpg';
}

有人请指出我正确的方向,如设置的属性或调用的功能,将改变不透明度？

我有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绘制.

为什么会有显示差异？

HTML5 Canvas没有明确设置单个像素的方法.

可能可以使用非常短的线设置像素,但是然后抗锯齿和线帽可能会干扰.

另一种方法可能是创建一个小ImageData对象并使用:

context.putImageData(data, x, y)

把它放到位.

任何人都能描述一种有效可靠的方法吗？