html5 两个canvas重叠放在一个div里面,每个canvas各填充一张图片,代码怎么写?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5 两个canvas重叠放在一个div里面,每个canvas各填充一张图片,代码怎么写?相关的知识,希望对你有一定的参考价值。

上面canvas1比下面的canvas2小,就可以看出重叠效果

1、首先素材准备,基本框架的建立。这里让一个有字的图片从左到右运动起来。

2、将图片素材引入网页,定义canvas标签,获取canvas的上下文。定义一个画图片的函数,使用canavs绘图API里面的drawImage来完成。

3、写一个更新的函数,因为我们要让他动起来,所以每时刻绘制的地方都不一样。注意:这里要用clearRect,这个函数,主要是为了清空画布。

4、写定时函数,每隔0.2秒就更新一次,重新绘制。

5、最后来看看最终的效果,就完成了。

参考技术A 指定两个canvas的postion:absolution,然后设置者两个canvas的left与top属性,需要注意的是建议把小的canvas放到上面,方法是设置两个canvas的z-index为不同的值,值大的在上面。
绘图的过程可以参考一下代码:
var mycanvas=document.getElementByIdx_x_x_x("mycanvas");
var context = mycanvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function()

// draw cropped image
var sourceX = 350;
var sourceY = 50;
var sourceWidth = 350;
var sourceHeight = 350;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = mycanvas.width / 2 - destWidth / 2;
var destY = mycanvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
参考技术B 这个需求可以用一个canvas完成,用canvas的drawImage分别画两张图就可以了。

如何以绝对位置将div放在右侧

【中文标题】如何以绝对位置将div放在右侧【英文标题】:How to place a div on the right side with absolute position 【发布时间】:2012-04-01 21:25:24 【问题描述】:

我有一个页面,必须在不影响实际页面的情况下显示动态消息框。此消息框必须出现在与现有内容重叠的页面右上角。

我尝试使用position: absolute,但我无法将其放在右上角。我也无法使用left,因为我必须支持 Bootstrap 的响应式设计。

这是一个示例标记

<html>
    <body>
        <div class="container">
            <!-- Need to place this div at the top right of the page-->
            <div class="ajax-message">
                <div class="row">
                    <div class="span9">
                        <div class="alert">
                            <a class="close icon icon-remove"></a>
                            <div class="message-content">
                                Some message goes here
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Page contents starts here. These are dynamic-->
            <div class="row">
                <div class="span12 inner-col">
                    <h2>Documents</h2>
                </div>
            </div>
        </div>
    </body>
</html>

此消息框相对于.container 的宽度应为50%,并且消息框的左侧不应与其重叠。即我们应该能够单击/选择左侧的内容。

请查找示例here。

请帮我解决这个问题。

【问题讨论】:

***.com/questions/11333624/… 【参考方案1】:
yourbox
   position:absolute;
   right:<x>px;
   top  :<x>px;

将其定位在右上角。请注意,该位置取决于不是static 定位的第一个祖先元素!

编辑:

I updated your fiddle.

【讨论】:

【参考方案2】:

您可以尝试以下方法吗:

float: right;

【讨论】:

【参考方案3】:

我假设您的容器元素可能是position:relative;。这意味着对话框将根据容器而不是页面进行定位。

你能把标记改成这个吗?

<html>
<body>
    <!-- Need to place this div at the top right of the page-->
        <div class="ajax-message">
            <div class="row">
                <div class="span9">
                    <div class="alert">
                        <a class="close icon icon-remove"></a>
                        <div class="message-content">
                            Some message goes here
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="container">
        <!-- Page contents starts here. These are dynamic-->
        <div class="row">
            <div class="span12 inner-col">
                <h2>Documents</h2>
            </div>
        </div>
    </div>
</body>
</html>

使用主容器外的对话框,您可以使用相对于页面的绝对定位。

【讨论】:

【参考方案4】:
yourbox 
   position: absolute;
   left: 100%;
   top: 0;

left:100%;是这里的重要问题!

【讨论】:

left:100% 将 div 的 LEFT 边缘放在窗口的最右侧,因此 div 的其余部分被隐藏。 left:94% 为我工作。很好的解决方案,谢谢。 我大笑起来。这假设 yourbox 是窗口宽度的 100%XDXDXDXD 虽然left: 100% 并不总是您想要的,但在我的情况下,它是完美的,因为它相对于 定位了 div 的 left 边缘其容器的右侧边缘。【参考方案5】:

您可以使用“translateX

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box
    text-align: right;

.absolute-right
    display: inline-block;
    position: absolute;


/*The magic:*/
.absolute-right
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);

</style>

【讨论】:

【参考方案6】:

简单,使用绝对定位,而不是指定顶部和左侧,而是指定顶部和右侧!

例如:

#logo_image 
    width:80px;
    height:80px;
    top:10px;
    right:10px;
    z-index: 3;
    position:absolute;

【讨论】:

(-‸ლ) 这行得通。 (MDN link 怀疑者)【参考方案7】:

右上角试试这个:

position: absolute;
top: 0;
right: 0;

【讨论】:

以上是关于html5 两个canvas重叠放在一个div里面,每个canvas各填充一张图片,代码怎么写?的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 Canvas 剪辑与前一个剪辑重叠

Android 里canvas 绘制了两个矩形,交叉位置颜色重叠

Html5之canvas重叠矩形getContextfillStylefillRect

如何让两个div重叠?

canvas学习(html5)画画

如何将div 转化成 html 5 canvas