解决方法
你可以使用
.getImageData()
和
.putImageData()
来做到这一点
例
var canvas,ctx,img,imgd,col; window.onload = function () { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); col = { 0: '#000',.25: '#0099f9',.55: '#03f',1: '#000' }; img = document.getElementById('img'); var w = h = canvas.width = canvas.height = 200; var grad = ctx.createradialGradient(w / 2,w / 2,h); for (var i in col) { grad.addColorStop(i,col[i]); //just a funny mess,please don't bother :) } ctx.fillStyle = grad; ctx.fillRect(0,w,h); imgd = ctx.getimageData(50,50,20,20); //caching the image Data } function draw() { ctx.drawImage(img,20); //drawing Image on to canvas } function redraw() { ctx.putimageData(imgd,20); //redraw the cached Image Data }
和一个简单的在线示例,只有你:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。