2020-04-01

Three.js—使用canvas drawImage()办法绘制图片，无法显示

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
我参照MDN里面的第一种办法做了一遍，结果报如下错误

出现上面这个问题的原因是，你获取到的src地址不符合drawImage的参数要求，所以的我改动如下

HTML代码

//这里的src可以赋值也可以不赋值，因为我们不用它，到后面js里面重新赋值就行了。
<img src="" alt=""/>

js代码

//创建canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
//设置图形填充为红色
ctx.fillStyle = '#FF0000';
//绘制图形→→圆形平面
ctx.beginPath();
ctx.arc(70, 18, 10, 0, Math.PI*2 , true);
ctx.closePath();
ctx.fill();
//插入图片
//这样写也可以  var img = new Image();
//但需要注意的是，在body里面必须包含img标签，要不然图片不显示，至于为什么，本人还没搞清楚，希望懂的指点一二。
var img = document.getElementById('pic');
img.src = 'logo/remind.png';
img.onload = drawImage();
function drawImage() {
   console.log(img.src);
   ctx.drawImage(img, 0, 0);
}
//把canvas作为纹理
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
var spritematerial = new THREE.SpriteMaterial({map: texture});
var sprite = new THREE.Sprite(spritematerial);
//进行缩放
sprite.scale.set(300, 150, 1,);
scene.add(sprite);

最终效果如下

刚学Three.js不久，如有哪个地方出错，还请指出，大家一起学习，共同进步