如何使用CSS / JavaScript对角地组合两个图像？ [英] How to combine two images diagonally using CSS/JavaScript?

问题描述

我希望这个三角形div（image1 / 2.jpg）中的内容是2个不同的因为我想让它们链接到2个不同的页面。

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; //矩形的宽度
 c.canvas.height = 400; //长方形的高度
 
 c.fillStyle = pattern1; 
 c.beginPath（）; 
 c.moveTo（0，0）; //左上角
 c.lineTo（400，0）; //右上角
 c.lineTo（400，400）; //右下角
 c.closePath（）; 
 c.fill（）; 
 
 c.fillStyle = pattern2; 
 c.beginPath（）; 
 c.moveTo（0，0）; //左上角
 c.lineTo（0，400）; //左下角
 c.lineTo（400，400）; //右下角
 
 c.closePath（）; 
 c.fill（）; 
  

HTML

 < canvas id =canvas> 
< img id =imageOnesrc =http://lorempixel.com/400/400/city/1/> 
< img id =imageTwosrc =http://lorempixel.com/400/400/city/2/> 
< / canvas> 
  

小提琴示例

图片不同角落

Is it possible to make this with CSS and maybe JavaScript if necessary?

I want content inside that triangle div (image1/2.jpg) to be 2 different divs since I want to make them into links to 2 different pages.

解决方案

Using html canvas and kinetic js you should be able to achieve this:

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

这篇关于如何使用CSS / JavaScript对角地组合两个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！