canvas教程

canvas画图完成后,转base64编码放在图片上

字号+ 作者:H5之家 来源:H5之家 2017-01-31 18:05 我要评论( )

canvas画图完成..canvas id=canvasOne style=display:none; width=500 height=qu

<canvas id="canvasOne" style="display:none;" width="500" height="500"></canvas>


<img id="img"/>
<script>
function canvasSupport(){
return Modernizr.canvas;
}


function callCanvasApps(){
var canvasOne=document.getElementById("canvasOne");
//if(!canvasSupport())
//return;
var d=canvasOne.getd("2d");
d.fillStyle = "#ffffaa";
d.fillRect(0, 0, 500, 300);
d.fillStyle = "#000000";
d.font = "20px Sans-Serif";
d.textBaseline = "top";
d.fillText ("23232",195,80);
//console.log(canvasOne.toDataURL());
return canvasOne.toDataURL();
//这句生成快照,可以将结果直接拷贝放到浏览器的URL里回车看到结果,这个以后做PNG图片似乎不需要美工了么 ,O(∩_∩)O哈哈~
}


if(window.addEventListener){
window.addEventListener("load",callCanvasApps,false);
}else{
window.onload=callCanvasApps;
}


document.getElementById("img").src=callCanvasApps();
</script>



 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评