那里出了错误?没有效果
来源:9-2 编程练习
陈子长
2018-11-22 16:04:54
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas图片</title> <style> canvas{background-color:lightblue;} </style> </head> <body> <canvas id="canvas" width="600px" height="600px">您的浏览器不支持canvas </canvas> <canvas id="can" width="600px" height="600px">您的浏览器不支持canvas </canvas> <script> var canvas=document.getElementById("canvas"); var context=canvas.getContext('2d'); //在此处补充代码 var img = new Image(); img.src = "http://climg.mukewang.com/5aa6633400017bc704170220.jpg"; img.onload = function () { context.drawImage(img, 0, 0, canvas.width, canvas.height); } var can = document.getElementById("can"); var cxt = can.getContext('2d'); cxt.font='50px sans-serif'; cxt.fillStyle='white'; cxt.fillText("==www.imooc.com==", 40, 400); context.drawImage(can, 0, 0, can.width, can.height, 0, 0, canvas.width, canvas.height); </script> </body> </html>
1回答
需要将第二个canvas绘制的第一个canvas上面的代码放在onload中:
当图片加载完之后再绘制。
自己修改测试下,祝学习愉快!
相似问题
回答 1
回答 3
回答 2
回答 2
回答 1