kfcfish
kfcfish
采纳率0%
2015-09-21 22:27 阅读 2.8k

html5在canvas中插入图片

在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等,并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容。

不过,图片增加了canvas操作的复杂度:必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上,那么canvas将不会显示任何图片。因此,开发人员要特别注意,在呈现之前,应确保图片已经加载完毕。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • caozhy 从今以后生命中的每一秒都属于我爱的人 2015-09-21 22:46

    有的浏览器有抗锯齿
    参考:http://blog.sina.com.cn/s/blog_51047ef701013t3p.html

    点赞 1 评论 复制链接分享
  • dongfeng9ge 东风玖哥 2015-09-23 02:09

    放弃IE,你将发现美丽新世界

    点赞 评论 复制链接分享
  • kfcfish kfcfish 2015-09-23 15:20

    我自己找到解决问题的方法,跟大家分享一下。首先把图片绘制在canvas上,然后用getImage 的方法把图片数据读入数组。遍历数组,对每个像素的rgb和alpha值进行处理,将所有灰色的像素点变成全黑,最后再用putImage的方法把数组复制到canvas上,就能得到线条清晰的像素画。

    点赞 评论 复制链接分享

相关推荐