如何创建画布，然后设置其颜色，然后使用Javascript / Jquery将其附加到div？
[英]How can I create a canvas, then set its color, and then append it to a div using Javascript/ Jquery?
问题描述
I am trying to build a basic game and somehow got really hung up on the first few steps. 
我正在尝试构建一个基本游戏，但在最初的几步中却莫名其妙地挂断了电话。 I am trying to create a canvas, the the color of the canvas, and then append to a div element. 我试图创建一个画布，画布的颜色，然后附加到div元素。 Every time I load this I either get an error, or nothing. 每次加载此代码时，我都会得到一个错误，或者什么也没有。 Even if the 2 console.logs load properly. 即使2 console.logs加载正确。 Please help! 请帮忙！
My HTML: 我的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dodge</title>
<script src="//code.jquery.com/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/journal/bootstrap.min.css" rel="stylesheet" integrity="sha256-fHWoqb8bPKjLiC7AuV6qy/lt0hrzfwM0ciyAu7Haf5w= sha512-3t2GeiCRNeKhZnUaUMygGiLKZzb/vPhvfw3y1Rt2FCwKuRaLVrOCTpavIYsZ4xqM52mbO7M93NaXbm/9dOA2Og==" crossorigin="anonymous">
<script src="../../../game.js">
</script>
</head>
<body>
<center>
<h1 id="h1">Dodge the enemy by pressing the left and right arrow keys!</h1>
<button
id="play"
class="btn btn-primary">Play game!</button>
</br>
</br>
<button
id="again"
class="btn btn-primary">Play Again!</button>
<div id="play-area">
</div>
</center>
</body>
</html>`
And heres the JS: 这是JS：
$(function () {
function createCanvas(width, height, id) {
var canvas = document.createElement("canvas");
var id2 = "#" + id;
canvas.width = width;
canvas.height = height;
canvas.id = id;
$(id2).css("color", "lawngreen");
$("#game-area").append(canvas);
}
$("#play").click(function () {
console.log("hello");
createCanvas(900, 900, "game-canvas");
console.log("hi!");
});
});
2 个解决方案
解决方案1
0 2016-01-06 00:15:51
Why not just draw the color onto the canvas instead of using CSS. 为什么不将颜色绘制到画布上而不是使用CSS。
function createCanvas(width, height, id) {
var canvas = document.createElement("canvas");
var id2 = "#" + id;
canvas.width = width;
canvas.height = height;
canvas.id = id;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "lawngreen";
ctx.fillRect (0, 0, width, height);
$("#play-area").append(canvas);
}
解决方案2
0 已采纳 2016-01-06 00:23:40
First you create the canvas object correctly, but you should also append it to the body. 首先，您正确创建了canvas对象，但是您也应该将其附加到主体上。 This is done after basic parameters are set. 设置基本参数后即可完成此操作。 After that you can manipulate the css with jQuery. 之后，您可以使用jQuery操作CSS。 It works in my fiddle. 它在我的小提琴中起作用。
Check it out here: https://jsfiddle.net/xu15q5h8/ 在这里查看： https : //jsfiddle.net/xu15q5h8/
I changed your code to point out how it correctly works: 我更改了代码以指出其如何正常工作：
$(function () {
function createCanvas(width, height, id) {
var canvas = document.createElement('canvas');
var body = document.getElementsByTagName("body")[0];
canvas.id = id;
canvas.width = width;
canvas.height = height;
body.appendChild(canvas);
$('canvas').css('background-color', 'rgba(158, 167, 184, 0.2)');
cursorLayer = document.getElementById("CursorLayer");
console.log(cursorLayer);
}
$("#play").click(function () {
console.log("hello");
createCanvas(900, 900, "game-canvas");
alert("hi!");
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.