标签: canvas

似乎没有原生的功能来绘制椭圆形的形状.我也不是在寻找蛋形.

是否可以画出一条带有2条贝塞尔曲线的椭圆形？有人在那里出现了吗？

我的目的是画一些眼睛,实际上我只是使用弧形.提前致谢.

解

因此scale()会更改所有下一个形状的缩放比例.Save()保存设置之前和恢复用于恢复设置以绘制新形状而不缩放.

感谢Jani

ctx.save();
ctx.scale(0.75, 1);
ctx.beginPath();
ctx.arc(20, 21, 10, 0, Math.PI*2, false);
ctx.stroke();
ctx.closePath();
ctx.restore();

所以我使用谷歌地图,我得到的图片,所以它看起来像这样

<img id="staticMap"
        src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false">

我需要保存它.我发现了这个:

function getBase64FromImageUrl(URL) {
    var img = new Image();
    img.src = URL;
    img.onload = function() {

        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));

    };
}

但是我遇到了这个问题:

Uncaught SecurityError:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染的画布.

我搜索了修复程序.我在这里找到了一个示例如何使用CORS,但我仍然无法将这两个代码绑在一起以使其工作.也许我这样做的方式不对,有一种更简单的方法吗？我正在尝试保存此图片,以便我可以将数据传输到我的服务器.所以也许有人做了这样的事情并知道如何按需要做.toDataURL()工作？

我正以一种非常直接的方式将文本打印到画布上:

var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);

但是,如何将文本更改为粗体,斜体或两者？有什么建议可以解决这个简单的例子

我试图用帆布调整一些图像的大小,但我对如何平滑它们毫无头绪.在Photoshop,浏览器等..他们使用了一些算法(例如双三次,双线性)但我不知道它们是否内置于画布中.

这是我的小提琴:http://jsfiddle.net/EWupT/

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width=300
canvas.height=234
ctx.drawImage(img, 0, 0, 300, 234);
document.body.appendChild(canvas);

第一个是普通的已调整大小的图像标记,第二个是画布.请注意画布如何不那么平滑.我怎样才能实现'平滑'？

我正在尝试数据绑定到这个ItemsControl:

<ItemsControl ItemsSource="{Binding Path=Nodes, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

通过使用它DataTemplate,我试图单独定位我的Node元素Canvas正确:

<DataTemplate DataType="{x:Type Model:EndNode}">
    <Controls:EndNodeControl Canvas.Left="{Binding Path=XPos}" Canvas.Top="{Binding Path=YPos}" />
</DataTemplate>

但是,它没有按预期工作.我的所有节点元素都在相同位置绘制在彼此之上.有关如何实现这一目标的任何建议？

我看过像Cufon和typeface.js这样的东西,但它们似乎是SIFR替代品,不允许你设置自由形式坐标并将自定义类型绘制到 <canvas>

有人有任何想法吗？

是否可以在鼠标下方获取RGB值像素？有一个完整的例子吗？这是我到目前为止所拥有的:

<script>
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.src = 'Your URL';

  img.onload = function(){
    ctx.drawImage(img,0,0);


  };

  canvas.onmousemove = function(e) {
        var mouseX, mouseY;

        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
        var c = ctx.getImageData(mouseX, mouseY, 1, 1).data;

        $('#ttip').css({'left':mouseX+20, 'top':mouseY+20}).html(c[0]+'-'+c[1]+'-'+c[2]);
  };
}

</script>

我有一个带有绘图的canvas元素,我想创建一个按钮,当单击它时,它会将图像保存为png文件.所以它应该打开保存,打开,关闭对话框......

我是用这个代码做的

var canvas = document.getElementById("myCanvas");
window.open(canvas.toDataURL("image/png"));

但是当我在IE9中测试它时,会打开一个新窗口,说"网页无法显示",其网址为:

数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf/6el6/6ZnpSW/zUn237u5MdXX1172 + z6rqaqeEG6VsJet + PDW/vkdrfx3H3yfT2tVzaP26X6hkw1q/BoeI/280/29JwznZxJPUyXtBQBAQBAQBQaBcECjefmi56BWlZYtAeqajx/WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9/ldau + H + TX/8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi/UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK/eTuQU1YuccCQBW7dyIq38/J5A/fN的/ ad3a5QGXmqsvLfGKJl0ZCFdONEOPyl5lGV8QEAQEAUGghiMgBKzqLHCeHqVOrILtduF4MpZExEqoVq167A3bmjap34J/bmoFqcj2dM3Pr9GK + b1p5bJXmXz9nEC + 3FiorYF4hcmXlo + gUrk +微米/ + E + QoVWfxxRJBQBAQBAQBQUAQqBwE8uzCwiMiaEqOWYR5jJ2/6Hl58nYHk0Pr1v1Ov62cTytXfE5r1yyyc6RgDhjI16 + L + tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6/eK7eJ/Ge0RS8oPc9gT1pTqN2jFocltfdPxecBU2HHxgB TKY + 71CjPGCO + YyU4j0TU9ZcGf0y + JSAoCgoAgIAgIAoJATUcgG2dQ0jpKZ/XP + PlLtEcs3huGQhO/r17K3rBvuGrEUt8i5HPAkHC/Yt6lKuwYKiuRM9TtGbY0rcerTBLwC/KY1fSNJ/MTBAQBQUAQqAwExANWGaiHx0z2aJl9CknET + MRc2XsVSKKaNP6O1CDhvtwYn5dJZf3gOG0IxLuS0e + LB4vw9sVhiwmHywmF6xqLLdYIQgIAoKAICAICAJVAQHTo2XmkNtzv6K5R7RXLOwRs3MaW + 47SNkG9oRxZQmun6qbImCo84VSE + 5pR3/zvFZJni/7e8tTHiCeqCkAqsKKig2CgCAgCAgCgoAgUG0RCBKzMLmwkzHdL4pk4XlUAn7Uu3XrVtPqVfO4lurPSq0KQa5cdAv9snBgqM5XFPlKSsSPM8o3mcxES2hZtf0rEMMFAUFAEKiBCEgIsqotavpk/OiwZViHPQk/LgHfHo5EnbCGjVpxeYo9yNmw9oeSn2YeTatWTPNzozzX8ZOeWPJlJVRJnrOoxUtJtmLEUmqoartH7BEEBAFBQBCoJggIASu/hUqkUokC2rZkwSSCBU12wpadhNXbpAk13vwwKlJ3O/L1QmYrxPNlDxuGyVtyIn6K8KSZHwY3XsRX + W0L0VyTEPjwM6KuFxN1uiB6Vkv48MpdjxLt9ieieQvscuvWE13eh2jnQ9zv + F2aICAICAKCQGEIRH22559H5IqnDTMGeU/SgUJ7WNLjOVH9g8/Xrv2Fa4P9SM6K7y4t + WXRw76sfVc42fPV936iJ5 + LKrbqTU0P3rA + 0dZbEh20L9HJHYj23I2oVrHFT5U5NFnY4m6svUA0Pvo8efbvjCBqtr0nN + IVot4Dkvv1v5aoy/HJcpUpsfI3olffdknV0uWuJfv9kWjkw55VIFAfM073PE4EkqZbEBf9HMTs8C6e3KhHiPbdqzJnKWMLAoJAeSMgHrDyRrj0 + rOEGvVoYY 9Y0inIeE + YQQ + cqGGj3dgDtvJjC/mKm7BHmG68lGjO + 0T

有人知道怎么修这个东西吗？

如何<canvas>用一种颜色填充整个HTML5 .

我看到了一些像这样的解决方案来改变背景颜色使用CSS,但这不是一个好的解决方案,因为画布保持透明,唯一改变的是它占据的空间的颜色.

另一个是通过在画布内创建具有颜色的东西,例如矩形(参见此处),但它仍然没有用颜色填充整个画布(如果画布大于我们创建的形状).

是否有解决方案用特定颜色填充整个画布？

我有一个页面,我们使用CSS定位一堆元素,并使用JS更改其"顶部和左侧"位置.

我有报道说这些东西都是错位的,但是用户有动机谎称这是"欺骗",所以我不确定他们是否说实话.我正试图找出一种方法来弄清楚他们是否撒谎,并且有一些"证据".

我知道Canvas有一种从图像元素或另一个canvas元素(BitBlt操作的类型)复制图像信息的方法.

是否有可能以某种方式,使用Canvas(或其他东西,Flash,无论如何),拍摄一张页面的"图片"？
同样,我不是想从一个人那里获取信息<image>.我正在尝试复制用户看到的内容,其中包含绝对定位的几个HTML元素(我最关心这些位置)并以某种方式将其上传到服务器.

我明白这不可能做到,但也许我错过了一些东西.

有任何想法吗？