javascript - [js]为什么画布里不出现图片呢？在线等
问题描述
<body> <p id='main'></p></p><script type='text/javascript'>function GED(ele) {return document.getElementById(ele);}function load_source(url, w, h) { this.canvas = document.createElement(’canvas’); this.canvas.width = w; this.canvas.height = h; this.ctx = this.canvas.getContext(’2d’); this.img = new Image(); this.img.src = url; this.img.onload = function () {this.ctx.drawImage(this.img, 0, 0); }.bind(this); return this.canvas;}source = new load_source(’http://htmljs.b0.upaiyun.com/uploads/1382542991440-2angles.png’, 300, 100);canvas = document.createElement(’canvas’)canvas.id = ’ff’canvas.width = 300;canvas.height = 100;GED(’main’).appendChild(canvas);ctxs = GED(’ff’).getContext(’2d’); ctxs.drawImage(source, 110, 110);</script>
问题解答
回答1：<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title></title></head><body> <p id='main'></p><script type='text/javascript'>function GED(ele){return document.getElementById(ele);}function load_source(url,w,h){ this.canvas = document.createElement(’canvas’); this.canvas.width = w; this.canvas.height = h; this.ctx = this.canvas.getContext(’2d’); this.img = new Image(); this.img.src = url; this.img.onload = function () {this.ctx.drawImage(this.img,0,0);window.ctxs.drawImage(source,110,110); }.bind(this); return this.canvas;}source = new load_source(’http://htmljs.b0.upaiyun.com/uploads/1382542991440-2angles.png’,300,100);GED(’main’).appendChild(source);canvas = document.createElement(’canvas’)canvas.id=’ff’canvas.width = 300;canvas.height = 100;GED(’main’).appendChild(canvas);ctxs= GED(’ff’).getContext(’2d’); </script></body></html>
上面这段代码是正常的，因为你的图片在load_source的时候，是通过img.onload异步画到load_source里面的canvas上的，然而，在那个时间之前，img上是没有图像的，所以load_source里面的canvas也是没图像的。
但是，在那个时间之前，DOM里的canvas已经就绪，而且执行了ctxs.drawImage(source,110,110)。由于此时的load_source里的canvas还是空的（里面的图还没加载完毕，里面的画布也就没有内容），所以source也就是空的，所以ctx.drawImage(source,110,110)画上去的东西也是空的。
回答2：试一哈下面这段代码，感觉是在做课程设计的样子
![javascript - [js]为什么画布里不出现图片呢？在线等](http://www.haobala.com/attached/image/news/202302/104537872c.png)
<!DOCTYPE html><html><head></head><body><p id='main'> <canvas style='border: 1px solid red;'> </canvas></p><script type='text/javascript'> var canvas = document.getElementById('myCanvas'); if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔)var ctx = canvas.getContext('2d');//创建新的图片对象var img = new Image();//指定图片的URLimg.src = 'http://htmljs.b0.upaiyun.com/uploads/1382542991440-2angles.png';//浏览器加载图片完毕后再绘制图片img.onload = function(){ //以Canvas画布上的坐标(10,10)为起始点，绘制图像 ctx.drawImage(img, 10, 10); }; }</script></html>
相关文章：
1. php - 微信开发验证服务器有效性2. git - 在web应用分布式部署的情况下怎么进行配置更新3. javascript - Ajax返回json格式之后的数据解析后取出来的数据为undefined？4. 前端 - WebStrom安装了angularjs插件，但是没有语法提示5. css - 文字排版问题，内容都是动态抓出来的，字数不一定。如何对齐啊6. java导入问题7. css3 - 微信前端页面遇到的transition过渡动画的bug8. 网页爬虫 - 关于Python的编码与解码问题9. vim中编辑HTML文件时换行不能缩进10. php对mysql提取数据那种速度更快
网公网安备