是否有可能使用html5和画布剪辑/屏蔽div？ [英] Is it possible to clip/mask a div using html5 and canvas?

问题描述

我有一个照片库，使用图像切断在奇怪的角度，但切出需要透明，以查看背景。我已经能够使用alpha蒙版工作，但必须有一个更好的方法。

不是掩盖图库中的每个图像，我想知道是否可能

我已经能够找到一个jsfiddle，我改变了一点，但它剪辑一个图像 - 不是一个div。现在我有一个完整的大脑冻结，不能想象如何改变它剪辑/掩盖一个div。

一些帮助将非常感激！ p>

jsfiddle这里使用下面的代码。请告知是否需要更多信息。

css：

  {background：＃999} 
 #mycanvas {width：840px; height：457px; border：1px solid red;} 
  

html：

 < canvas id =mycanvas>< / canvas& 
  

js：

 code> //抓取画布和绘图上下文
 var canvas = document.getElementById（'mycanvas'）; 
 var ctx = canvas.getContext（'2d'）; 
 
 //创建图像元素
 var img = document.createElement（'IMG'）; 
 
 //当图像加载时，绘制它
 img.onload = function（）{
 
 //保存状态，所以我们可以撤消剪辑
 ctx.save（）; 
 
 
 //创建某种形状的形状
 ctx.beginPath（）; 
 ctx.moveTo（0，0）; 
 ctx.lineTo（840，0）; 
 ctx.lineTo（840，457）; 
 ctx.lineTo（162，457）; 
 ctx.closePath（）; 
 //剪切到当前路径
 ctx.clip（）; 
 
 
 ctx.drawImage（img，0，0）; 
 
 //撤消剪辑
 ctx.restore（）; 
} 
 
 //指定加载图像的src 
 img.src =http://www.donina.com/donina/clipper.jpg; 
  

解决方案

您可以通过旋转使用css3其他div 。如果你需要随机角度，最多你需要四个div。

I have a photo gallery that uses images "cut off" at an odd angle but the cut-out needs to be transparent in order to see the background. I had been able to get it to work using alpha masks but there must be a better way.

Rather than mask each image within the gallery, I wondered whether it might be possible instead to clip/mask the containing div using html5.

I've been able to find a jsfiddle, which I've changed slightly, but it clips an image - not a div. Now I'm having a complete brain freeze and can't think how to change it to clip/mask a div instead.

Some assistance would be much appreciated!

jsfiddle here using code below. Please advise if more info is required.

css:

body {background:#999}
#mycanvas {width:840px;height:457px;border:1px solid red;}

html:

<canvas id="mycanvas"></canvas>

js:

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {

    // Save the state, so we can undo the clipping
    ctx.save();


    // Create a shape, of some sort
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(840, 0);
    ctx.lineTo(840, 457);
    ctx.lineTo(162, 457);
    ctx.closePath();
    // Clip to the current path
    ctx.clip();


    ctx.drawImage(img, 0, 0);

    // Undo the clipping
    ctx.restore();
}

// Specify the src to load the image
img.src = "http://www.donina.com/donina/clipper.jpg";

解决方案

You can clip the div's by rotating using css3 other divs. At most you need four divs if you need random angles.

这篇关于是否有可能使用html5和画布剪辑/屏蔽div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！