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. python相关问题求解决，有偿2. javascript - input输入框触发change事件后，外部元素会被选中3. python - 用__call__ 实现装饰器功能4. javascript - vue2.0中router.repalce跟router.push有什么区别，二者的应用场景是会有怎样的区别？5. javascript - prismplayer播放器全屏问题6. javascript - 在sublime中如何给.vue文件注释？7. python - 请问用cxfreeze打包的可执行程序能反编译出源码么？8. HTML5怎么访问本地文件？9. javascript - 这种上传图片预览怎么做？10. javascript - 把字符串日期转换成一般时间格式后，发现小于10的数字不会自动添加0在前面，如下
网公网安备