Tag: html5

将SVG转换为带有应用图像的PNG作为svg元素的背景

我有一个外部的SVG文件,其中包含一些模式中的embedded式图像标签。 每当我使用toDataURL()将这个SVG转换成PNG时,生成的PNG图像不包含我已经作为模式应用于某些SVGpath的图像。 有什么办法可以解决这个问题吗?

为什么音video事件没有泡沫?

我想知道为什么我的一些JavaScript不工作,直到我认为audio事件没有冒泡的DOM树,例如timeupdate事件。 是否有理由不让audio和video标签泡泡的事件发生?

:有子类的nth-child(偶/奇)select器

我试图将奇数/偶数select器应用于父类的列表中的所有元素。 HTML: <ul> <li class="parent">green</li> <li class="parent">red</li> <li>ho ho ho</li> <li class="parent">green</li> <li class="parent">red</li> </ul> CSS: .parent:nth-child(odd) { background-color: green; } .parent:nth-child(even) { background-color: red; } ul { width:100px; height: 100px; display: block; } 链接到jsFiddle 但颜色正在重置。 我希望列表项是文本的颜色。 有没有办法做到这一点?

表单上真的需要动作吗?

这里说它是必需的 http://www.w3schools.com/tags/att_form_action.asp 但是我发现即使我没有指定一个action属性,表单也会被提交,表单会被提交到当前页面,而这正是我想要的。

CSS3改变偏斜的一面

是否有可能创build“CSS3变形偏斜一侧” 我find了一个解决scheme,但它对我没有用处,因为我需要使用图像作为背景(而不是颜色) #skewOneSide { border-bottom: 40px solid #FF0000; border-left: 50px solid rgba(0, 0, 0, 0); height: 0; line-height: 40px; width: 100px; } 即使这个JsFiddle也没用 (偏斜的区域应该是透明的)

jquery获取带有连字符和区分大小写的HTML 5数据属性

如何使用jquery .data()获取数据属性? 在这种情况下,html5 data-*属性转换为小写和camelcase? 在使用自定义属性存储数据时,遵循的所有主要规则是什么? <input type="button" class="myButton" value="click me" data-productId="abc"/> <input type="button" class="myButton" value="click me" data-product-id="abc"/> <input type="button" class="myButton" value="click me" data-PRODUCT-ID="abc"/> <input type="button" class="myButton" value="click me" data-ProDUctId="abc"/>

从HTML5 Canvas获取二进制(base64)数据(readAsBinaryString)

有什么方法可以将HTML Canvas的内容作为二进制数据读取吗? 目前我已经得到了下面的HTML来显示一个input文件和它下面的canvas: <p><button id="myButton" type="button">Get Image Content</button></p> <p>Input:<input id="fileInput" type="file"/></p> <p>Canvas<canvas id="myCanvas" width="578" height="200"/></p> 然后我设置我的input文件正确设置canvas,它工作正常: $('#fileInput').on('change', function() { $.each(this.files, function() { var image = new Image(); image.src = window.URL.createObjectURL(this); image.onload = function() { $("canvas").drawImage({ source: image, x: 50, y: 50, width: 100, fromCenter: false }); }; }); }); 我现在需要从Canvas获取二进制数据(Base64编码),当button被点击时,它会将数据推送到服务器… 最终的结果是,我需要为用户提供select文件,裁剪/resize的function,然后单击一个button,编辑后的图像将被上传到服务器(我不能做服务器端由于服务器端的限制裁剪/resize…) 任何帮助将是伟大的! 干杯

使用DOM将SVG元素添加到现有的SVG

我有一个类似于下面的代码的HTML结构: <div id='intro'> <svg> //draw some svg elements <svg> </div> 我希望能够使用javascript和DOM将以上定义的SVG添加到一些元素。 我将如何做到这一点? 我正在想 var svg1=document.getElementById('intro').getElementsByTagName('svg'); svg1[0].appendChild(element);//element like <line>, <circle> 我不是很熟悉使用DOM,或者如何创build传递给appendChild的元素,所以请帮我解决这个问题,或者告诉我有什么其他的select,我必须解决这个问题。 非常感谢。

HTML5电子邮件validation

据说“使用HTML5,我们不需要更多的js或服务器端代码来检查用户的input是否是有效的电子邮件或url” 如何在用户input后validation电子邮件? 如果用户input他/她的电子邮件地址的错误forms,没有JS如何显示消息。 <input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email"> <input type="submit" value="Submit">

使用HTML5 Canvas进行image processing和纹理映射?

在我正在研究的3D引擎中,我成功地devise了3D立方体。 填补双方的唯一方法是使用纯色或渐变就我而言。 为了使事情更加令人兴奋,我真的很喜欢用一个简单的位图来实现纹理映射。 重点是我几乎找不到任何关于JavaScript中image processing主题的文章或代码示例。 而且,HTML5canvas中的图像支持似乎仅限于裁剪。 我怎么能伸展一个位图,以便一个矩形的位图可以填补一个不规则的立方体脸? 在2D中,由于透视,投影的方形立方体面不是正方形,所以我必须将其拉伸以使其适合任何四边形。 希望这张图片能澄清我的观点。 现在左脸上已经充满了白色/黑色渐变。 如何在纹理映射之后使用位图填充它? 有没有人有使用JavaScript和HTML5canvas透视纹理映射(或image processing)的任何提示? 编辑:我得到了它的工作,感谢6502! 但是,这是相当CPU密集型,所以我很乐意听到任何优化的想法。 结果使用6502的技术 – 使用纹理图像