假设我有div和div里面我有几个表单控件,如文本框,dropdow复选框,radiobutton等.现在我希望当用户单击某个特定按钮时,div的内容将在画布上绘制.我搜索谷歌有一些示例代码或示例,但没有找到.请指导我如何使用
jquery在html5画布上绘制DIV的内容,因为它是样式表的控件外观.
问题已更新
<div class="login">
<form method="post" action="www.mysite.com">
<fieldset>
<div class="login-fields"><label class="" for="username" id="username-lbl">User Name</label>
<input type="text" size="25" class="validate-username" value="" id="username" name="username"></div>
<div class="login-fields"><label class="" for="password" id="password-lbl">Password</label>
<input type="password" size="25" class="validate-password" value="" id="password" name="password"></div>
<button class="button" type="submit">Log in</button>
</fieldset>
</form>
</div>
假设我有一个上面的表单,我需要通过jquery和look& ;;在画布上以编程方式绘制.我的形式感觉会一样.
UPDATE
var domElement = document.getElementById('myElementId');
html2canvas(domElement,{
onrendered: function (domElementCanvas) {
var canvas = document.createElement('canvas');
canvas.getContext('2d').drawImage(domElementCanvas,100,100);
// do something with canvas
}
}
解决方法
铬有一个解决方案：
https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#drawWindow()
但我认为你需要的是使用xml svg;这是一个例子：http://jsfiddle.net/3N69j/
代码：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:12px'>" +
"<ul> <li style='color:red'> hello </li> <li style='color:green'>thomas</li> </ul> " +
"</div>" +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img,0); }
你可以使用jquery轻松获得HTML代码(点击,使用$(this).html()并提供svg数据
祝好运
