canvas 單位問題 類似rem和rpx自適應手機螢幕寬度
阿新 • • 發佈:2018-12-23
//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);
}
//獲取應用例項
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);
}