Question

我希望使用 HTML5 Canvas ＆amp ;;来复制this web page上的4个形状。仍有页面拉伸到宽度＆amp;身高100％。

这可能吗？我对Canvas很新。

这是我目前的CSS：

html, body{
    height: 100%;
    margin:0;
}
.out{
    height:100%;
    position:relative;
    overflow:hidden;
}
.in{
    height:75%;
    background-color:#6C2223;
}
.out:before, .out:after, .in:after{
    content:'';
    position:absolute;
    bottom:25%;
    width:100%;
    height:700%;
    background-color:#9A4445;
}
.out:before{
    right:50%;

    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;

     -webkit-transform : rotate(-45deg);
    transform : rotate(-45deg);
}
.out:after{
    left:50%;

    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;

    -webkit-transform : rotate(45deg);
    transform : rotate(45deg);
}
.in:after{
    bottom:0;
    width:100%;
    height:25%;
    background-color:#911618;
    z-index:-1;
}
img{
    width:100%;
    height:auto;
    position:absolute;
    top:0;
    z-index:3;
    opacity:0.5;
}
.text{
    position:absolute;
    top:0;
    z-index:4;
}

感谢您的帮助。

Answer 1

如果只需要混合模式，胸部是胸部，毕业是渐变的png

<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" width="800px" height="600px"/>
        <script>
var c = document.getElementById("canvas");
ctx = c.getContext("2d");

var img = new Image();
img.src = "boobs.jpg";
ctx.globalCompositeOperation = "multiply";
ctx.drawImage(img, 20, 20);
var img2 = new Image();
img2.src = "grad.png";
ctx.drawImage(img2, 20, 20);

        </script>
    </body>
</html>

UPD。查找方形图像800 x 800

<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" width="800px" height="800px"/>
        <script>
var c = document.getElementById("canvas");
ctx = c.getContext("2d");
ctx.globalCompositeOperation = "multiply";

var img1 = new Image();
img1.src = "tree.png";
ctx.drawImage(img1, 0, 0);

var img2 = new Image();
img2.src = "drops.png";
ctx.drawImage(img2, 0, 0);

var img3 = new Image();
img3.src = "face.png";
ctx.drawImage(img3, 0, 0);

var idt = ctx.getImageData(0, 0, 800, 800);
var xquarter = 800/2;
var yquarter = 800/2;
var x, y;
var imageWidth = 800;
var imageHeight = 800;
for(y = 0; y < imageHeight; y++) {
    for(x = 0; x < imageWidth; x++) {
        if (x > xquarter) {
            if (y > yquarter) {
                idt.data[((imageWidth * y) + x) * 4] += 30;
            } else {
                idt.data[((imageWidth * y) + x) * 4 + 1] += 30;
            }
        } else {
            if (y > yquarter) {
                idt.data[((imageWidth * y) + x) * 4 + 2] += 30;
            } else {
                idt.data[((imageWidth * y) + x) * 4 + 3] += 30;
            }
        }
    }
}
ctx.putImageData(idt,0,0);
        </script>
    </body>
</html>

enter image description here

UPD2。

<html>
    <head>
        <style>
            html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
}
        </style>
    </head>
    <body>
        <canvas id="canvas"/>
        <script>

function foo() {
    var c = document.getElementById("canvas");

    var xcoeff, ycoeff, maxcoeff;
    var screenWidth  = window.innerWidth;
    var screenHeight = window.innerHeight;
    ctx = c.getContext("2d");
    ctx.canvas.width  = screenWidth;
    ctx.canvas.height = screenHeight;
    ctx.globalCompositeOperation = "multiply";

    var img1 = new Image();
    img1.src = "tree.png";
    //note that all images have same size
    xcoeff = screenWidth / img1.width;
    ycoeff = screenHeight / img1.height;
    maxcoeff = xcoeff > ycoeff ? xcoeff : ycoeff;
    ctx.scale(maxcoeff, maxcoeff);

    ctx.drawImage(img1, 0, 0);


    var img2 = new Image();
    img2.src = "drops.png";
    ctx.drawImage(img2, 0, 0);

    var img3 = new Image();
    img3.src = "face.png";
    ctx.drawImage(img3, 0, 0);
}
foo();
window.onresize = foo;
        </script>
    </body>
</html>

我可以使用HTML5 Canvas重新创建此效果吗？

1 个答案: