canvas教程

canvas导出为图片 张鑫旭

字号+ 作者:H5之家 来源:H5之家 2017-11-14 15:21 我要评论( )

张鑫旭web前端学习实例页面之canvas导出为图片

CSS代码: canvas { border: 1px solid #beceeb; background-color: #f0f3f9;} HTML代码: <canvas></canvas> JS代码: (function() { if (isNaN(window.screenX)) return; var canvas = document.querySelector("#canvas") , context = canvas.getContext("2d"); // 添加文字 context.save(); context.font = "30px 微软雅黑"; context.textAlign = "center"; context.fillText("点击生成新图片", 150, 85); context.restore(); // 点击事件 canvas.addEventListener("click", function() { this.toBlob && this.toBlob(function(blob) { var newImg = document.createElement("img"), url = URL.createObjectURL(blob); newImg.onload = function() { // 移除 URL.revokeObjectURL(url); }; newImg.src = url; document.querySelector(".demo").appendChild(newImg); }); }); })();

 

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

相关文章
  • 移动网页html5的canvas画布生成缩略图的方法

    移动网页html5的canvas画布生成缩略图的方法

    2017-11-14 15:22

  • Win10系统之家

    Win10系统之家

    2017-11-13 16:00

  • HTML5 canvas纸片3D旋转动画

    HTML5 canvas纸片3D旋转动画

    2017-11-12 18:08

  • 怎样保存网页上的 canvas 图片

    怎样保存网页上的 canvas 图片

    2017-11-12 14:12

网友点评