javascript - html5画布对象绘制
问题描述
我在画布上很新,但我试图画一个坠落的物体。首先我试图只绘制一个对象,但它不起作用。我怎么能画一个物体(如果你可以这么好,但没有必要让我知道如何让它移动)?或者我在这里做错了什么?代码:
let c, ctx;
window.onload = function(){
c = document.getElementById("boom");
ctx = c.getContext("2d");
c.width = window.innerwidth;
c.height = window.innerHeight;
setup();
draw();
};
function draw(){
//window.requestAnimationFrame(draw);
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 100, 100);
regen.push(new regen(this.x, this.y, this.w, this.h, this.color));
};
function setup(){
}
function regen(x, y, w, h, color){
this.x = 100;
this.y = 100;
this.width = 20;
this.height = 40;
this.color = "blue";
//this.xSpeed = 4;
//this.ySpeed = 4;
this.draw = function(){
//this.update = function(){
//this.x += this.xSpeed;
//this.y += this.ySpeed;
//}
}
}
function getRndFloat(min, max) {
return Math.random() * (max - min + 1) + min;
}
解决方案
你打错字了innerwidth
:一定是innerWidth
。但是你没有定义,你的画布没有宽度
推荐阅读
- php - 重力形式:动态创建一组字段
- laravel - 用户在 Flutter/Laravel API 中使用错误的凭据登录
- kubernetes - Kubernetes系统:发现角色机制
- php - PHP会话cookie不保存
- airflow - DAG的任务初始化需要时间
- c# - 更改 Unity 颜色渐变检查器字段
- ajax - 使用来自 ajax 的数据返回视图
- html - Blogger 动态视图(马赛克主题):如何在移动设备上获取全宽图像?
- go - 如何运行无限循环并在电报机器人中不断获取更新
- angular - Azure 和 NX,运行管道时出错:npm:另一个进程,id 为 4224,当前正在运行 ngcc