1. 程式人生 > >canvas 單位問題 類似rem和rpx自適應手機螢幕寬度

canvas 單位問題 類似rem和rpx自適應手機螢幕寬度

//index.js
//獲取應用例項
var app = getApp()
var H = 750;
var W = 750;
function dawLine(context){
  for(var i = 0; i < 20; i++){
    //線條寬度
    context.setLineWidth(1);
    //線條顏色(支援顏色編碼與rgb()函式)
    context.setStrokeStyle("rgb(205,40,40)");
    context.moveTo(0, i*25);
    context.lineTo(750, i*25);
  }
  for (var i = 0; i < 20; i++) {
    //線條寬度
    context.setLineWidth(1);
    //線條顏色(支援顏色編碼與rgb()函式)
    context.setStrokeStyle("rgb(205,40,40)");
    context.moveTo(i * 25, 0);
    context.lineTo(i * 25, 750);
  }
  context.stroke();
  context.draw();
}
function snake(context){
  context.setFillStyle("#00ff00");
  context.setLineWidth(25);
  // 畫一個矩形,第一個和第二個引數代表座標,第三個引數表示寬度,第四個引數表示高度
  context.fillRect(0, 0, 25, 200);
  context.stroke();
  context.draw();
}
function move(context){
  var count = 0;
  // 蛇的長度
  var h = 200;
  setInterval(function (){
    // 判斷臨界條件,蛇頭走出畫布
    if(count < 200){
      context.setFillStyle("#00ff00");
      context.setLineWidth(25);
      // 畫一個矩形,第一個和第二個引數代表座標,第三個引數表示寬度,第四個引數表示高度
      context.fillRect(0, count, 25, 200);
      context.stroke();
      context.draw();
    }
    else{


    }
    count += 25;
  }, 1000);
}