javascript - 如何使用 CSS/JavaScript 对 Angular 线组合两个图像？

Question

是否可以使用 CSS 或 JavaScript(如有必要)来实现？

我希望三 Angular 形 div (image1/2.jpg) 中的内容是 2 个不同的 div，因为我想将它们变成指向 2 个不同页面的链接。

Answer 1

使用 html canvas 和 kinetic js 你应该能够实现这个:

JavaScript

var c = $('#canvas').get(0).getContext("2d"),
    imageOne = $('#imageOne').get(0),
    imageTwo = $('#imageTwo').get(0),
    pattern1 = c.createPattern(imageOne,"no-repeat"),
    pattern2 = c.createPattern(imageTwo,"no-repeat");

c.canvas.width  = 400;  // width of rectangle
c.canvas.height = 400; // height of rectangle

c.fillStyle = pattern1;
c.beginPath();
c.moveTo(0, 0); // top left
c.lineTo(400, 0);  // top right
c.lineTo(400, 400);  // bottom right
c.closePath();
c.fill();

c.fillStyle = pattern2;
c.beginPath();
c.moveTo(0, 0); // top left
c.lineTo(0, 400); //bottom left
c.lineTo(400, 400); // bottom right

c.closePath(); 
c.fill();

HTML

<canvas id="canvas">
    <img id="imageOne" src="http://lorempixel.com/400/400/city/1" />
    <img id="imageTwo" src="http://lorempixel.com/400/400/city/2" />
</canvas>

Fiddle Example

Images going to different corner