英文:
Dynamically take Width and height of canvas image and also create another canvas using javascript on one page
问题
我正在使用JavaScript创建一个带有动态图像的画布。现在我想要根据图像动态获取画布的高度和宽度。并且在同一页上创建另一个画布。这里是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var _puzzleWidth = 640;
var _puzzleHeight = 480;
var _stage;
function init(){
var canvas = document.createElement('canvas');
canvas.id = "CursorLayer";
//canvas.width = _puzzleWidth;
//canvas.height = _puzzleHeight;
_stage = canvas.getContext('2d');
canvas.style.border = "1px solid";
//draw();
var img = new Image();
img.onload = function(){
_stage.drawImage(img, 0, 0);
}
img.src = "http://lorempixel.com/output/animals-q-g-640-480-3.jpg";
var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
}
</script>
</head>
<body onload="init();"></body>
</html>
提前感谢。
英文:
I am creating a canvas using javascript with a dynamic image. Now I want to take canvas's height and width dynamically depending on the image. And as well as create another canvas on same page. Here I am attaching my code.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var _puzzleWidth = 640;
var _puzzleHeight = 480;
var _stage;
function init(){
var canvas = document.createElement('canvas');
canvas.id = "CursorLayer";
//canvas.width = _puzzleWidth;
//canvas.height = _puzzleHeight;
_stage = canvas.getContext('2d');
canvas.style.border = "1px solid";
//draw();
var img = new Image();
img.onload = function(){
_stage.drawImage(img, 0, 0);
}
img.src = "http://lorempixel.com/output/animals-q-g-640-480-3.jpg";
var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
}
</script>
</head>
<body onload="init();"></body>
</html>
<!-- end snippet -->
Thanks in advance.
答案1
得分: 1
请尝试以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var _puzzleWidth = 640;
var _puzzleHeight = 480;
var _stage;
var _stage2;
function init(){
var canvas2 = document.createElement('canvas');
canvas2.id = "CursorLayer2";
var canvas = document.createElement('canvas');
canvas.id = "CursorLayer";
_stage = canvas.getContext('2d');
canvas.style.border = "1px solid";
_stage2 = canvas2.getContext('2d');
canvas2.style.border = "1px solid";
var img = new Image();
var img1 = new Image();
img.onload = function(){
canvas.width = this.width;
canvas.height = this.height;
_stage.drawImage(img, 0, 0);
}
img1.onload = function(){
canvas2.width = this.width;
canvas2.height = this.height;
_stage2.drawImage(img1,0,0);
}
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTfSV9AGQi9c48oRysYiuSs9Bs4J3B2p4R3eh-z1hsS-Z01HD17";
img1.src = "http://lorempixel.com/output/animals-q-g-640-480-3.jpg";
var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
var body1 = document.getElementsByTagName("body")[0];
body1.appendChild(canvas2);
}
</script>
</head>
<body onload="init();"></body>
</html>
希望这对你有帮助。
英文:
Try this below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var _puzzleWidth = 640;
var _puzzleHeight = 480;
var _stage;
var _stage2;
function init(){
var canvas2 = document.createElement('canvas');
canvas2.id = "CursorLayer2";
var canvas = document.createElement('canvas');
canvas.id = "CursorLayer";
_stage = canvas.getContext('2d');
canvas.style.border = "1px solid";
_stage2 = canvas2.getContext('2d');
canvas2.style.border = "1px solid";
var img = new Image();
var img1=new Image();
img.onload = function(){
canvas.width = this.width;
canvas.height = this.height;
_stage.drawImage(img, 0, 0);
}
img1.onload = function(){
canvas2.width = this.width;
canvas2.height = this.height;
_stage2.drawImage(img1,0,0);
}
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTfSV9AGQi9c48oRysYiuSs9Bs4J3B2p4R3eh-z1hsS-Z01HD17";
img1.src = "http://lorempixel.com/output/animals-q-g-640-480-3.jpg";
var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
var body1 = document.getElementsByTagName("body")[0];
body1.appendChild(canvas2);
}
</script>
</head>
<body onload="init();"></body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论