老师,我的问题是本节的6-4编程练习。
来源:6-4 编程练习
慕斯0469344
2019-09-09 09:24:46
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas图片</title> <style> canvas{background-color:lightblue;} </style> </head> <body> <canvas id="canvas" width="800px" height="800px">您的浏览器不支持canvas </canvas> <script> var canvas=document.getElementById("canvas"); var context=canvas.getContext('2d'); //在此处补充代码 var img = new Image(); img.src = './img/logo.png'; img.onload = function(){ context.drawImage(img,330,380,); } context.arc(400,400,150,0,Math.PI*2,true); context.fillStyle = '#000'; context.fill(); context.stroke(); </script> </body> </html>
老师,您看我设置的圆的中心是(400,400)半径为150,而图片的宽度正好也是300,高度为100,如果要把图片放在中间,位置应该是(250,350)为什么我设置(330,380)才看着像是放在中间了呢?
1回答
同学你好,
把图片放在中间,位置应该是(250,350);可能是背景颜色是黑色,导致观察不清楚,同学可以把背景颜色调成浅一点的颜色试试看哈~
测试一下:
效果:
如果我的回答帮助了你,欢迎采纳,祝学习愉快~
相似问题
回答 3
回答 1
回答 1
回答 1
回答 1