标签: canvas

HTML5/Canvas是否支持双缓冲？

我想做的是在缓冲区上绘制我的图形然后能够将其原样复制到画布上,这样我就可以做动画并避免闪烁.但我找不到这个选项.谁知道我怎么能这样做？

javascript html5 canvas double-buffering

for*_*yez

2011 08-03

81
推荐指数

8
解决办法

6万
查看次数

画布中的真实鼠标位置

我试图用鼠标画在HTML5画布上,但它似乎运行良好的唯一方法是如果画布位于0,0(左上角),如果我改变画布位置,由于某种原因它不会像它应该画的那样.这是我的代码.

 function createImageOnCanvas(imageId){
    document.getElementById("imgCanvas").style.display = "block";
    document.getElementById("images").style.overflowY= "hidden";
    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    var img = new Image(300,300);
    img.src = document.getElementById(imageId).src;
    context.drawImage(img, (0),(0));
}

function draw(e){
    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    posx = e.clientX;
    posy = e.clientY;
    context.fillStyle = "#000000";
    context.fillRect (posx, posy, 4, 4);
}

Run Code Online (Sandbox Code Playgroud)

HTML部分

 <body>
 <div id="images">
 </div>
 <canvas onmousemove="draw(event)" style="margin:0;padding:0;" id="imgCanvas"
          class="canvasView" width="250" height="250"></canvas>

Run Code Online (Sandbox Code Playgroud)

我已经读过有一种方法可以在JavaScript中创建一个简单的函数来获得正确的位置,但我不知道如何做到这一点.

javascript canvas mouse-position html5-canvas

Sol*_*ent

2016 04-17

80
推荐指数

4
解决办法

11万
查看次数

限制Chart.js折线图上的标签编号

我想从我得到的数据中显示我的图表上的所有点,但我不想显示它们的所有标签,因为那时图表不是很易读.我在文档中寻找它,但找不到任何限制它的参数.

我不想只拿三个标签,因为那时图表也只限于三个点.可能吗？

我现在有类似的东西:

如果我可以留下每个第三个第四个标签,那就太好了.但我发现标签选项绝对没有.

javascript css charts canvas chart.js

mmm*_*mmm

2017 06-05

80
推荐指数

7
解决办法

7万
查看次数

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

我正在使用canvas和javascript制作游戏.

当页面长于屏幕(评论等)时,按向下箭头会向下滚动页面,使游戏无法播放.

当玩家想要向下移动时,我该怎么做才能防止窗口滚动？

我猜Java游戏等等,只要用户点击游戏就不会有问题.

我尝试了以下解决方案:如何使用箭头键禁用FF中的页面滚动,但我无法使其工作.

javascript scroll canvas arrow-keys

Kan*_*ete

2017 05-23

79
推荐指数

2
解决办法

8万
查看次数

Chart.js画布调整大小

在(Android WebView HTML5画布错误)中,我发布了一个关于使用Graph.js库绘制图形的问题.我现在的问题是,如果我调用函数多次绘制图形,画布每次调整大小.每次将图形重绘为同一画布时,其大小也会发生变化.我也尝试设置画布的大小但没有成功.

可能是什么原因？为什么画布每次调整大小？

html5 canvas chart.js

Jak*_*aka

2017 05-23

79
推荐指数

6
解决办法

19万
查看次数

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

我正在玩<canvas>元素,绘制线条等.

我注意到我的对角线是抗锯齿的.我更喜欢看到我正在做的事情 - 有什么方法可以关闭这个功能吗？

html javascript canvas antialiasing

Blo*_*ard

2012 02-06

77
推荐指数

12
解决办法

8万
查看次数

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>

Run Code Online (Sandbox Code Playgroud)

在Chrome 8中,我收到错误消息: Uncaught TypeError: Type error

在Firefox的Firebug中:"对象的类型与对象关联的参数的预期类型不兼容"代码:"17"

在那个base64中是我在GIMP中制作的5x5px黑色PNG方块,并在GNU/Linux程序base64中将其转换为base64.

html5 base64 png canvas

Tom*_*nal

2018 01-06

77
推荐指数

2
解决办法

10万
查看次数

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";

Run Code Online (Sandbox Code Playgroud)

如您所见,虽然据说drawImage会自动应用抗锯齿,但图像不会消除锯齿.我尝试了很多不同的方法,但似乎没有用.你能告诉我如何获得抗锯齿图像吗？谢谢.

html5 interpolation canvas antialiasing html5-canvas

Dun*_*dar

2019 02-03

77
推荐指数

3
解决办法

5万
查看次数