草庐IT

the-canvas-element

全部标签

javascript - 是否可以制作带有线条背景的 Canvas 或不是矩形的 Canvas ?

我正在尝试制作这个https://massmoca.org/event/walldrawing340/在Javascript代码中,使用p5.js,但我不知道如何用线条填充这些形状。是否有任何其他可能性,比如制作圆形或类似的Canvas,或者我只需要分别制作每个形状?目前我是一个接一个地做,但是做三Angular形和梯形比较粗糙...varsketch=function(p){with(p){leth,w,space;p.setup=function(){createCanvas(900,400);h=height/2;w=width/3;space=10;noLoop();};p.d

javascript - 使 Firefox 渲染 Canvas 文本与 CSS 文本相同

我一直在试验canvas标签和Javascript。我制作了一个页面,该页面从Twitter公共(public)时间线获取推文并将其动画化。它通过在动画背景中使用Canvas元素来工作。动画完成后,它会在顶部创建一个具有相同文本的div元素。我这样做是为了让推文文本可以选择并且链接可以点击。现在,在Safari、Chrome甚至Opera中,canvas文本和div文本看起来几乎完全一样。然而在Firefox中,文本的大小差异足以使其在变为div时“跳转”。有谁知道如何使用CSS使Firefox在canvas元素和div上呈现相同的文本?或者这是与引擎的渲染不一致。我已经把页面onmy

javascript - 3D CSS 变换 : translateZ causes elements to disappear in Chrome

我正在使用Javascript在Chrome中操作CSS转换,我注意到当translateZ值变得太低(很远)时,元素将会消失。这似乎只有在有大量元素时才会发生。这似乎与元素的z-index有关。这是问题的一个例子:http://jsbin.com/iZAYaRI/26/edit将鼠标悬停在输出上以查看问题。有人知道为什么会这样吗?更新:看起来该元素并没有真正消失,而是移动了一千个像素左右。 最佳答案 在我的例子中,z平移属性大约为零。将我的零翻译从0更改为1解决了我的问题。在safari中运行的原始代码:transform:sca

javascript - 使用 Uint8ClampedArray 的 Node.js Canvas 实现

致所有Canvas专家——我需要帮助。我正在使用node-canvas我正在尝试使用它的getImageData方法获取imageData。不幸的是它返回:interfaceImageData{readonlyattributeunsignedlongwidth;readonlyattributeunsignedlongheight;readonlyattributeCanvasPixelArraydata;}CanvasPixelArray已弃用,取而代之的是Uint8ClampedArray。我的问题是:有没有办法让getImageData返回Uint8ClampedArray或将

javascript - Jquery $(element).contents().first().text ("new text") 不起作用?

我在Google或此处找不到任何相关信息。我有一个div,里面有一些文本和一些html:http://somewebsite.com/big/long/unfriendly/path/我想做的是添加一个在每个斜线之后。(因为该值不会以其他方式换行并弄乱了我的表格)。在$('#test-div').html()上做一个简单的替换也会与强标签混淆,所以这不是一个选项。我想使用$('#test-div').contents()过滤掉文本部分(递归地)会起作用。但是我似乎无法编辑返回的各个位。我希望这会改变http://部分:$('#test-div').contents().first().

element日期选择器el-date-picker样式

1、基本用法代码:el-date-picker type="date" v-model="valueStart" value-format="yyyy-MM-dd" placeholder="开始时间">/el-date-picker>代码解读:type参数是用来定义选择器选择的对象,这里我们选择的是日期(date),也可以只选择年(year),只选择月(month),或只选择周(week)。v-model是绑定一个值,如果不绑定的话,即使选择了某一个日期,框框里也没有数值。value-format定义获取的时间的格式placeholder是占位提示文字。效果:背景白色,与页面颜色不搭2、调高

javascript - 手机间隙 : Canvas is not refreshing properly

我正在Phonegap中开发一个安卓应用程序。在Canvas上我通过触摸制作了一个移动图像。我在不同版本的设备上进行了测试当我运行4.1、4.2或4.3时图像在移动时复制。所有其他版本都很好我尝试应用Canvas背景颜色和不透明度,但仍然复制有什么解决办法吗提前致谢 最佳答案 我检查应用程序4.0、4.1、4.2、4.3和4.4只有果冻bean有这个问题varcanvas=document.getElementById('canvas');canvas.style.opacity=0.99;setTimeout(function()

javascript - 页面关闭前提醒 : How to change the Chrome's default message?

我正在使用以下代码片段在页面关闭前触发警报,但Chrome似乎忽略了该消息并显示其默认消息“你想离开这个网站吗?你所做的更改可能不会保存”。如何让chrome显示我的消息而不是默认消息?window.onbeforeunload=function(e){e.returnValue="Asearchisinprogress,doyoureallywanttostopthesearchandclosethetab?";return"Asearchisinprogress,doyoureallywanttostopthesearchandclosethetab?";}

javascript - 多个 Canvas 层的碰撞检测

我正在努力弄清楚如何检测在不同Canvas层上绘制的Assets的碰撞。我制作了两个数组,其中包含我想要“碰撞”的东西,称为collidable_objects_layer1和collidable_objects_layer2。这些数组基本上绘制了Angular色不应该穿过的table和后面的墙。bar.js基本上包含您在下面的链接中看到的整个栏“场景”。main.js是让我的玩家移动的循环。我认为我的体系结构一团糟,因为我没有看到将这两者联系在一起的简单方法,所以对此有任何建议(这里需要模块还是它们只是在伤害我?)。现在的样子我不确定如何通过不同的碰撞测试添加更多“场景”。我假设碰撞

javascript - 如何修改只读属性(element.classList)或将其分配给 javascript 中的其他值?

window.addEventListener('keydown',function(e){constkey=document.querySelector(`div[data-key='${e.keyCode}']`);console.log(key.className);console.log(key.classList);key.classList=['ajay','dish'];} A上面是chromedevtools修改值后的截图。我阅读了MDNelement.classList是只读属性,但可以通过add()等进行修改。我将它分配给其他一些数组,这也能正常工作。在其他情况