[英]Can I recreate this effect with HTML5 Canvas?
我想使用HTML5 Canvas在此網頁上復制這4種形狀,並且仍然將頁面的寬度和高度拉伸到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;
}
感謝您的任何幫助。
如果只需要混合模式,則胸部是胸部,而grad是帶有漸變的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>
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.