草庐IT

canvas_comment

全部标签

javascript - 在 Canvas 上绘制一个充满随机彩色方 block 的圆

我有一个非常奇怪的例子要处理......我需要用1x1像素填充一个圆圈,在浏览器中使用不同的颜色。我试过的,是这样的functiongetRandomColor(){varletters='0123456789ABCDEF'.split('');varcolor='#';for(vari=0;i');}}createRandomSqaure($('.pic'));情况是,它super慢(如您所想,对于200x200的图像,循环进行了40k次),我想也许更好的方法是在Canvas上绘制它?最后我需要画一个充满这个像素的圆...我不知道如何以更优化的方式做这样的事情,我也可以使用nodej

javascript - 在 Canvas 上绘制一个充满随机彩色方 block 的圆

我有一个非常奇怪的例子要处理......我需要用1x1像素填充一个圆圈,在浏览器中使用不同的颜色。我试过的,是这样的functiongetRandomColor(){varletters='0123456789ABCDEF'.split('');varcolor='#';for(vari=0;i');}}createRandomSqaure($('.pic'));情况是,它super慢(如您所想,对于200x200的图像,循环进行了40k次),我想也许更好的方法是在Canvas上绘制它?最后我需要画一个充满这个像素的圆...我不知道如何以更优化的方式做这样的事情,我也可以使用nodej

javascript - 如何在 HTML5 Canvas 上拖动一段用户生成的文本?

基本上,我编写的代码是能够在文本框中键入单词。当按下按钮提交它时,该词将被发布到HTML5Canvas上,以便人们可以看到它。我现在想要做的是能够在HTML5Canvas上拖动那个词。我在实现这一目标时遇到了一些困难,想知道是否有人可以帮助我解决这个问题?这是我到目前为止所做的代码:varfname;varcanvas;varctx;varcanvasX;varcanvasY;varmouseIsDown;functionaddTitle2(){canvas=document.getElementById("canvas");ctx=canvas.getContext("2d");ca

javascript - 如何在 HTML5 Canvas 上拖动一段用户生成的文本?

基本上,我编写的代码是能够在文本框中键入单词。当按下按钮提交它时,该词将被发布到HTML5Canvas上,以便人们可以看到它。我现在想要做的是能够在HTML5Canvas上拖动那个词。我在实现这一目标时遇到了一些困难,想知道是否有人可以帮助我解决这个问题?这是我到目前为止所做的代码:varfname;varcanvas;varctx;varcanvasX;varcanvasY;varmouseIsDown;functionaddTitle2(){canvas=document.getElementById("canvas");ctx=canvas.getContext("2d");ca

javascript - 奇怪的 HTML 5 Canvas 抗锯齿

我一直在玩Canvas元素,发现当我尝试绘制彼此相邻的NxN统一纯色单元格时,在某些宽度/高度配置中,它们之间有模糊的白色线条。例如,这个Canvas应该看起来是黑色的,但包含某种网格,我推测这是浏览器中错误的抗锯齿的结果。可以这么说,这个错误只出现在一些配置中,但我想永远摆脱它。有什么办法可以避免这种情况吗?您在Canvas中遇到过抗锯齿问题吗?我做了thisfiddle它演示了这个问题,并允许您使用Canvas的尺寸和单元格的数量。它还包含我用来绘制单元格的代码,以便您可以检查它并告诉我我是否做错了什么。varctx=canvas.getContext('2d');ctx.clea

javascript - 奇怪的 HTML 5 Canvas 抗锯齿

我一直在玩Canvas元素,发现当我尝试绘制彼此相邻的NxN统一纯色单元格时,在某些宽度/高度配置中,它们之间有模糊的白色线条。例如,这个Canvas应该看起来是黑色的,但包含某种网格,我推测这是浏览器中错误的抗锯齿的结果。可以这么说,这个错误只出现在一些配置中,但我想永远摆脱它。有什么办法可以避免这种情况吗?您在Canvas中遇到过抗锯齿问题吗?我做了thisfiddle它演示了这个问题,并允许您使用Canvas的尺寸和单元格的数量。它还包含我用来绘制单元格的代码,以便您可以检查它并告诉我我是否做错了什么。varctx=canvas.getContext('2d');ctx.clea

适用于 Google Maps API v3 的 HTML5 Canvas 地标

我正在寻找一种方法来生成复杂的地标(或“附加”到地标的叠加层)。有没有办法(我还没有找到)使用Mapv3api来附加/覆盖地标?或者,我是否需要在GoogleAPI之外进行绘制,然后让监听器在用户平移map时触发重绘? 最佳答案 您使用覆盖onAdd()、draw()和onRemove()的对象扩展google.maps.OverlayView在onAdd中,您可能希望在google.maps.MapPanes中设置对Pane的引用以将您的标记放入其中。然后您将必须处理平移和缩放事件。你这样做:CustomOverlayView.p

适用于 Google Maps API v3 的 HTML5 Canvas 地标

我正在寻找一种方法来生成复杂的地标(或“附加”到地标的叠加层)。有没有办法(我还没有找到)使用Mapv3api来附加/覆盖地标?或者,我是否需要在GoogleAPI之外进行绘制,然后让监听器在用户平移map时触发重绘? 最佳答案 您使用覆盖onAdd()、draw()和onRemove()的对象扩展google.maps.OverlayView在onAdd中,您可能希望在google.maps.MapPanes中设置对Pane的引用以将您的标记放入其中。然后您将必须处理平移和缩放事件。你这样做:CustomOverlayView.p

javascript - 保存带有背景图像的 Canvas

我有一张Canvas的背景图片,并向Canvas添加了一些基本元素。现在我想用Canvas样式的背景图像保存Canvas(在.png中)。尝试过:varcanvas=document.getElementById("mycanvas");varimg=canvas.toDataURL("image/png");但这好像并没有保存Canvas的背景图片。有出路吗? 最佳答案 当您想将Canvas+背景保存为图像时,您需要执行一系列事件:创建一个与普通Canvas一样大的内存Canvas。称它为can2ctx2.drawImage(ca

javascript - 保存带有背景图像的 Canvas

我有一张Canvas的背景图片,并向Canvas添加了一些基本元素。现在我想用Canvas样式的背景图像保存Canvas(在.png中)。尝试过:varcanvas=document.getElementById("mycanvas");varimg=canvas.toDataURL("image/png");但这好像并没有保存Canvas的背景图片。有出路吗? 最佳答案 当您想将Canvas+背景保存为图像时,您需要执行一系列事件:创建一个与普通Canvas一样大的内存Canvas。称它为can2ctx2.drawImage(ca