草庐IT

canvas2D

全部标签

javascript - 使用相交线清除 javascript canvas lineto

我有一个Canvas,上面有一些通过鼠标移动绘制的线条。我希望该行只持续几秒钟,然后自行删除。有点像在设定长度的地方旋转丝带。我正在使用lineTo在Canvas中绘制线条。我从这里引用了一些代码。问题我可以使用clearRect()清除线条,但这确实会清除所有内容,问题是如果线条相交,它也会清除相交区域。这是我的Fiddle单击并拖动到右下角的框内:http://jsfiddle.net/m2K5h/clearrect会给我这个:总结clearRect只是删除所有内容,我想动态地“取消绘制”这条线,这样它就有了生命周期。而且我这辈子都找不到可以做的事情....任何帮助都会很棒!!!!

javascript - 没有 Canvas 的 HTML5 getImageData

这个问题在这里已经有了答案:JavaScript:gettingImageDatawithoutcanvas(3个答案)关闭8年前。有没有办法在没有Canvas的情况下使用图像的getImageData?我想获得图像鼠标位置处的像素颜色。

javascript - 没有 Canvas 的 HTML5 getImageData

这个问题在这里已经有了答案:JavaScript:gettingImageDatawithoutcanvas(3个答案)关闭8年前。有没有办法在没有Canvas的情况下使用图像的getImageData?我想获得图像鼠标位置处的像素颜色。

javascript - 如何防止在正文内容上滚动并在打开时启用在 Canvas 外导航上滚动?

我已经实现了一个非常基本的Canvas外导航(http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/)。我遇到的唯一问题是您无法滚动菜单,这在移动横向模式下尤其成问题,在该模式下菜单延伸到可视屏幕区域下方。我想知道是否有办法在打开导航菜单时防止page-wrapperdiv中的内容滚动并在Canvas外导航中启用滚动,并且,如果可能,不要在导航栏上显示丑陋的大滚动条。HTML:TitleHomeAboutContactBlogBodyContentHereCSS:#menu{position:fixed;top:0;b

javascript - 如何防止在正文内容上滚动并在打开时启用在 Canvas 外导航上滚动?

我已经实现了一个非常基本的Canvas外导航(http://blog.tomri.ch/super-simple-off-canvas-menu-navigation/)。我遇到的唯一问题是您无法滚动菜单,这在移动横向模式下尤其成问题,在该模式下菜单延伸到可视屏幕区域下方。我想知道是否有办法在打开导航菜单时防止page-wrapperdiv中的内容滚动并在Canvas外导航中启用滚动,并且,如果可能,不要在导航栏上显示丑陋的大滚动条。HTML:TitleHomeAboutContactBlogBodyContentHereCSS:#menu{position:fixed;top:0;b

javascript - HTML5 Canvas : Change Image Color

我有一张图像(灰度形式),我想更改其颜色(用户特定)。由于改变灰度图像的颜色非常困难,因此我提出了一种方法。图像分为两部分。一张是白色的图片。其次,半透明的灰度图像。现在,我将两个图像放在彼此的顶部(下面是白色图像,上面是灰度图像),这样当我改变白色图像的颜色时,用户就可以看到它。问题:除一个问题外,这种方法对我有效。当我为白色图像着色时,它会从Angular落像素化。JSFiddle:http://jsfiddle.net/pandey_mohit/BeSwL/JSFiddle包含三个胶囊图像:顶部胶囊部分白色图像(用于着色)底部胶囊部分白色图像(用于着色)用于3D效果的半透明图像(

javascript - HTML5 Canvas : Change Image Color

我有一张图像(灰度形式),我想更改其颜色(用户特定)。由于改变灰度图像的颜色非常困难,因此我提出了一种方法。图像分为两部分。一张是白色的图片。其次,半透明的灰度图像。现在,我将两个图像放在彼此的顶部(下面是白色图像,上面是灰度图像),这样当我改变白色图像的颜色时,用户就可以看到它。问题:除一个问题外,这种方法对我有效。当我为白色图像着色时,它会从Angular落像素化。JSFiddle:http://jsfiddle.net/pandey_mohit/BeSwL/JSFiddle包含三个胶囊图像:顶部胶囊部分白色图像(用于着色)底部胶囊部分白色图像(用于着色)用于3D效果的半透明图像(

javascript - 保存高分辨率 HTML5 Canvas 图像

我正在HTML5中制作透视校正图像过滤器。该算法已准备就绪并且运行良好。但我在导出图像时遇到问题。我使用带有Three.js的WebGL上下文进行透视校正,因此我可以在GPU上快速执行操作(它实际上运行速度非常快,在不到半秒的时间内完成3680x2760图像渲染)。所以我有两件事:一个用户用来配置和预览的低分辨率视口(viewport)(720x480),以及一个高分辨率背景视口(viewport)(图像的大小,只是临时创建以渲染图像并销毁它们,全部在RenderHighRes函数中完成)。但我的谷歌浏览器在打开图片时崩溃了,可能是因为尺寸和源格式。为了导出图像,我正在使用此代码:co

javascript - 保存高分辨率 HTML5 Canvas 图像

我正在HTML5中制作透视校正图像过滤器。该算法已准备就绪并且运行良好。但我在导出图像时遇到问题。我使用带有Three.js的WebGL上下文进行透视校正,因此我可以在GPU上快速执行操作(它实际上运行速度非常快,在不到半秒的时间内完成3680x2760图像渲染)。所以我有两件事:一个用户用来配置和预览的低分辨率视口(viewport)(720x480),以及一个高分辨率背景视口(viewport)(图像的大小,只是临时创建以渲染图像并销毁它们,全部在RenderHighRes函数中完成)。但我的谷歌浏览器在打开图片时崩溃了,可能是因为尺寸和源格式。为了导出图像,我正在使用此代码:co

html - 模拟 document.getElemetById ('.form' ).getContext ('2d' ) 使用 sinon

我使用karma、mocha、chai、sinon和Angular模拟进行单元测试。在我的$scope.loadChart中,我正在Canvas标签中绘制图表。我正在使用http://www.chartjs.org/绘制图表。Chartjs需要这段代码,document.getElemetById('#canvas').getContext('2d')。我如何在Sinon中stub这个?我的测试卡在了这一行。 最佳答案 您可以stubdocument.getElementById并让它返回一个Canvas对象,该对象被stub并编程