真机上看不到绘制的线
发布于 6 年前 作者 rzhou 849 次浏览 来自 问答

做一个简单的画线功能，在模拟器上没有问题。在真机上看不到。

if (this.moveing)

{

ctx.beginPath();

ctx.lineWidth = ‘5’

ctx.strokeStyle = ‘red’

ctx.moveTo(this.startX, this.startY);

ctx.lineTo(this.curX, this.curY);

ctx.stroke();

ctx.closePath();

}

3 回复
import './libs/weapp-adapter.js'
 
let ctx = canvas.getContext('2d')
 
export default class Main
{
  constructor()
  {
    this.bindLoop = this.loop.bind(this)
    this.aniId = window.requestAnimationFrame(
      this.bindLoop,
      canvas
    )
 
    canvas.addEventListener('touchstart', ((e) =>
     {
      e.preventDefault()
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
    }).bind(this))
 
    canvas.addEventListener('touchmove', ((e) =>
    {
      e.preventDefault()
      this.curX  = e.touches[0].clientX
      this.curY = e.touches[0].clientY
      this.moveing = true;
 
      if (this.touched)
        this.setAirPosAcrossFingerPosZ(x, y)
 
    }).bind(this))
 
    canvas.addEventListener('touchend', ((e) => {
      e.preventDefault()
 
      this.moveing = false;
    }).bind(this))
  }
 
  Render()
  {
    if (this.moveing)
    {
      ctx.beginPath();
      ctx.lineWidth = '5'
      ctx.strokeStyle = 'red'
      ctx.moveTo(this.startX, this.startY);
      ctx.lineTo(this.curX, this.curY);
      ctx.stroke();
      ctx.closePath();
       
    }
  }
 
  loop()
  {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    this.Render();
    this.aniId = window.requestAnimationFrame(
      this.bindLoop,
      canvas
    )
  }
}
 
let app = new Main()

环境无法复现，可否提供代码片段？

能做个代码片段吗

回到顶部