                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

畫布重疊兩個(gè)canvas怎么重疊在一起

兩個(gè)canvas怎么重疊在一起

慕斯3556369

2017-12-09

源自：Canvas繪圖詳解 8-6

關(guān)注問題我要回答

11348

操作

收起

3 回答

Riddle2000
2020-02-13

贊！好用

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

Tom_Kwok
2017-12-22

??<!--?上面的HTML結(jié)構(gòu)有誤?-->
??<div?class="canvas-wrapper">
??????<canvas?id="canvas-1"?class="canvas"></canvas>
??????<canvas?id="canvas-2"?class="canvas"></canvas>
??</div>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

Tom_Kwok
2017-12-22

<!DOCTYPE?html>
<html>
??<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>canvas重疊</title>
????<style>
??????.canvas-wrapper?{
????????position:?relative;
????????width:?600px;
????????height:?600px;
????????border:?1px?solid?black;
??????}
??????.canvas?{
????????width:?400px;
????????height:?400px;
??????}
??????#canvas-1?{
????????background-color:?#058;
????????top:?0;
????????left:?0;
??????}
??????#canvas-2?{
????????background-color:?red;
????????top:?200px;
????????left:?200px;
??????}
??????.canvas?{
????????position:?absolute;
??????}
????</style>
??</head>
??<body>
????<div>
??????<canvas?id="canvas-1"></canvas>
??????<canvas?id="canvas-2"></canvas>
????</div>
??</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答