草庐IT

canvas2D

全部标签

javascript - 位置 :fixed not playing nice with off canvas menu in Chrome and IE

目的是什么我正在使用offcanvasmenu使用CSS和JavaScript。Canvas外菜单按预期工作。我想要一个位于屏幕左侧的侧边栏菜单,并在触发菜单时移动。这个想法是让一个菜单触发器跨度为100像素,高度为100%,并且始终位于屏幕左侧。使用绝对位置我在所有浏览器上都有高度问题,使用固定位置Firefox工作正常但遇到下面提到的问题。错误Firefox问题:据我所知,没有。Chrome问题:向下滚动几个像素后,边栏菜单触发器不会拉伸(stretch)整个页面。InternetExplorer:当侧边栏菜单被触发时,侧边栏似乎完全消失了。jsFiddle因为我的代码在HTML、

记录一次uniapp中给canvas添加图片内容空白原因

记录一次uniapp中给canvas添加图片内容空白原因应该适合微信小程序和uniapp找了半天原因,最后看到一篇文章说,由于画布的大小大于了图片的大小导致了生成的内容是空白的。最后知道了解决办法就是在写入页面之前将画布大小修改成和要写入的图片大小相同。如下,vue中动态的修改canvas宽高下面是在写入图片之前修改canvas宽高部分代码 this.canvasWidth=dWidth;//将canvas宽度修改成计算完成的图片宽度 this.canvasHeight=dHeight;//将canvas高度修改成计算完成的图片高度 canvasContext.drawIma

javascript - HTML5 Canvas : Zooming

有没有简单的方法可以在Canvas(JavaScript)中放大和缩小?基本上我有一个400x400像素的Canvas,我希望能够使用“鼠标按下”(2x)放大并使用“鼠标弹起”返回。过去两天用谷歌搜索,但到目前为止没有运气。:( 最佳答案 根据使用drawImage的建议,您还可以将其与缩放功能结合使用。因此在绘制图像之前将上下文缩放到您想要的缩放级别:ctx.scale(2,2)//Doublessizeofanythingdrawtocanvas.我在这里创建了一个小例子http://jsfiddle.net/mBzVR/4/它

javascript - HTML5 Canvas : Zooming

有没有简单的方法可以在Canvas(JavaScript)中放大和缩小?基本上我有一个400x400像素的Canvas,我希望能够使用“鼠标按下”(2x)放大并使用“鼠标弹起”返回。过去两天用谷歌搜索,但到目前为止没有运气。:( 最佳答案 根据使用drawImage的建议,您还可以将其与缩放功能结合使用。因此在绘制图像之前将上下文缩放到您想要的缩放级别:ctx.scale(2,2)//Doublessizeofanythingdrawtocanvas.我在这里创建了一个小例子http://jsfiddle.net/mBzVR/4/它

javascript - 可以从 Canvas 构造函数创建 HTML5 Canvas 元素吗

我希望能够从构造函数中创建Canvas元素,这样我就可以创建这样的函数。functioncreateCanvasContext(height,width){varbody=document.getElementsById('body')[0];varcanvas=newCanvas();canvas.height=height;canvas.width=width;varcontext=canvas.getContext('2d');body.appendChild(canvas);returncontext;}我在varcanvas=newCanvas()行收到一条错误消息,指出“C

javascript - 可以从 Canvas 构造函数创建 HTML5 Canvas 元素吗

我希望能够从构造函数中创建Canvas元素,这样我就可以创建这样的函数。functioncreateCanvasContext(height,width){varbody=document.getElementsById('body')[0];varcanvas=newCanvas();canvas.height=height;canvas.width=width;varcontext=canvas.getContext('2d');body.appendChild(canvas);returncontext;}我在varcanvas=newCanvas()行收到一条错误消息,指出“C

javascript - HTML5 Canvas 到 PNG 文件

我正在尝试将HTML5Canvas转换为图像。这是我到目前为止得到的:vartmp_canvas=document.getElementById('canvas');vardataURL=tmp_canvas.toDataURL("image/png");$('#thumbnail_list').append($('',{src:dataURL}).addClass('image'));但问题是我得到了这段代码:我想要一个用户可以下载的普通图片路径!有什么帮助吗? 最佳答案 Info:IE10+doesn'tsupportbelow

javascript - HTML5 Canvas 到 PNG 文件

我正在尝试将HTML5Canvas转换为图像。这是我到目前为止得到的:vartmp_canvas=document.getElementById('canvas');vardataURL=tmp_canvas.toDataURL("image/png");$('#thumbnail_list').append($('',{src:dataURL}).addClass('image'));但问题是我得到了这段代码:我想要一个用户可以下载的普通图片路径!有什么帮助吗? 最佳答案 Info:IE10+doesn'tsupportbelow

javascript - 为 Canvas 上的按键添加事件监听器

我正在尝试制作一个响应键盘和鼠标输入的Canvas应用程序。我有这段代码:canvas=document.getElementById('canvas');canvas.addEventListener('mousedown',function(event){alert('mousedown');},false);canvas.addEventListener('keydown',function(event){alert('keydown');},false);每当我单击鼠标时都会出现“鼠标按下”警报,但“按键按下”警报永远不会出现。相同的代码在JSBin上运行良好:http://j

javascript - 为 Canvas 上的按键添加事件监听器

我正在尝试制作一个响应键盘和鼠标输入的Canvas应用程序。我有这段代码:canvas=document.getElementById('canvas');canvas.addEventListener('mousedown',function(event){alert('mousedown');},false);canvas.addEventListener('keydown',function(event){alert('keydown');},false);每当我单击鼠标时都会出现“鼠标按下”警报,但“按键按下”警报永远不会出现。相同的代码在JSBin上运行良好:http://j