程序设计 canvas

9

我想从获取的数据中显示图表上的所有点，但我不想显示它们的所有标签，因为那样的话，图表就不太可读了。我在文档中寻找它，但是找不到任何可以限制它的参数。我不想仅以三个标签为例，因为那时图表也仅限于三个点。可能吗？我现在有类似的东西：如果我能留下每三分之四的标签，那就太好了。但是我对标签选项一无所获。

94 javascript css canvas charts chart.js

18

第一次使用@ font-face将文本绘制到<canvas>无效

当我在具有通过@ font-face加载的字体的画布中绘制文本时，该文本无法正确显示。它根本不显示（在Chrome 13和Firefox 5中），或者字体错误（Opera 11）。此类意外行为仅在带有字体的第一个图形上发生。之后，一切正常。这是标准行为还是什么？谢谢。 PS：以下是测试用例的源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>@font-face and &lt;canvas&gt;</title> <style id="css"> @font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P.ttf'); } </style> <style> canvas, pre { border: 1px solid black; padding: 0 1em; } </style> </head> <body> <h1>@font-face and &lt;canvas&gt;</h1> <p> Description: click …

93 html canvas font-face

10

SVG和HTML5 Canvas有什么区别？

SVG和HTML5 Canvas有什么区别？他们似乎都对我做同样的事情。基本上，它们都使用坐标点绘制矢量插图。我想念什么？SVG和HTML5 Canvas之间的主要区别是什么？为什么我要选择一个？

92 html canvas svg

5

如何用特定颜色填充整个画布

如何<canvas>用一种颜色填充整个HTML5 。我看到了一些解决方案，如本使用CSS来改变背景颜色，但由于画布保持透明，这不是一个很好的解决方案，那就是改变它占据了空间的颜色的唯一的事。另一种方法是通过在画布内部创建带有颜色的东西，例如矩形（请参见此处），但仍然不能用颜色填充整个画布（以防画布大于我们创建的形状）。是否有解决方案，以特定的颜色填充整个画布？

91 javascript html canvas

10

为什么canvas.toDataURL（）抛出安全异常？

我睡眠不足吗？以下代码 var frame=document.getElementById("viewer"); frame.width=100; frame.height=100; var ctx=frame.getContext("2d"); var img=new Image(); img.src="http://www.ansearch.com/images/interface/item/small/image.png" img.onload=function() { // draw image ctx.drawImage(img, 0, 0) // Here's where the error happens: window.open(frame.toDataURL("image/png")); } 抛出此错误： SECURITY_ERR: DOM Exception 18 这是绝对不可能的！有人可以解释一下吗？

90 javascript html canvas cross-domain

8

使用javascript画布调整图像大小（平滑）

我正在尝试使用画布调整某些图像的大小，但是我对如何使其平滑一无所知。在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); 第一个是正常调整大小的图像标签，第二个是画布。请注意，画布如何不那么光滑。如何获得“顺滑度”？

90 javascript html image canvas html5-canvas

2

Base64 PNG数据到HTML5画布

我想将以Base64编码的PNG图像加载到canvas元素。我有这个代码： <html> <head> </head> <body> <canvas id="c"></canvas> <script type="text/javascript"> var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; ctx.drawImage(data, 0, 0); </script> </body> </html> 在Chrome 8中，我收到错误消息： Uncaught TypeError: Type error 在Firefox的Firebug中，这是：“对象的类型与与该对象关联的参数的预期类型不兼容”代码：“ 17” 在那个base64中，是我在GIMP中制作的5x5px黑色PNG正方形，并将其转换为GNU / Linux程序base64中的base64。

89 html canvas png base64

3

在用户浏览器中禁用箭头键滚动

我正在使用画布和JavaScript开发游戏。当页面比屏幕长（注释等）时，按向下箭头将页面向下滚动，使游戏无法进行。当播放器只想向下移动时，如何防止窗口滚动？我猜对于Java游戏而言，只要用户点击游戏，这都不是问题。我尝试了以下解决方案：如何使用箭头键禁用FF中的页面滚动，但无法正常工作。

87 javascript canvas scroll arrow-keys

13

Chart.js画布调整大小

在（Android WebView HTML5 canvas错误）中，我发布了一个有关使用Graph.js库绘制图形的问题。我现在遇到的问题是，如果我多次调用该函数绘制图形，则画布每次都会调整大小。每次将图形重新绘制到同一画布上时，其大小也会更改。我也尝试设置画布的大小，但没有成功。可能是什么原因？为什么画布每次都会调整大小？

86 html canvas chart.js

11

我可以关闭HTML <canvas>元素上的抗锯齿功能吗？

我在玩<canvas>元素，画线等。我注意到我的对角线是抗锯齿的。我希望自己的工作看上去比较粗糙-有什么办法可以关闭此功能？

85 javascript html canvas antialiasing

9

在mousemove上从画布获取像素颜色

是否可以在鼠标下获取RGB值像素？有完整的例子吗？这是我到目前为止的内容： 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 …

85 javascript html jquery canvas getimagedata

12

HTML5 / Canvas是否支持双缓冲？

我想做的是在缓冲区上绘制图形，然后将其原样复制到画布上，这样我就可以制作动画并避免闪烁。但是我找不到这个选项。有人知道我该怎么做吗？

83 javascript html canvas double-buffering

4

如何将HTML5画布文本设置为粗体和/或斜体？

我以一种非常简单的方式将文本打印到画布上： var ctx = canvas.getContext('2d'); ctx.font = "10pt Courier"; ctx.fillText("Hello World", 100, 100); 但是，如何将文本更改为粗体，斜体或两者呢？有什么建议可以解决这个简单的例子吗？

83 javascript html canvas typography

6

HTML5 canvas drawImage：如何应用抗锯齿

请看下面的例子： http://jsfiddle.net/MLGr4/47/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); img = new Image(); img.onload = function(){ canvas.width = 400; canvas.height = 150; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150); } img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg"; 如您所见，尽管据说drawImage自动应用了抗锯齿，但该图像并未抗锯齿。我尝试了许多不同的方法，但是似乎没有用。您能告诉我如何获得抗锯齿图像吗？谢谢。

81 html canvas html5-canvas interpolation antialiasing

16

如何在html5画布中绘制椭圆形？

似乎没有绘制椭圆形形状的本机功能。我也不是在寻找蛋形。是否可以绘制具有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();

81 javascript html canvas

Questions tagged «canvas»