怎样在html中实现图层重叠,javascript – 在HTML5画布中实现图层

我即将在HTML5画布中实现Photoshop般的图层。目前我有两个想法。第一个也许更简单的想法是为每个图层设置一个Canvas元素，如：

这样当你画到一个图层 – 它实际上是去“层”。具有透明位置的层可以通过下面的层(Canvases)看到。层叠叠由z-index属性控制。

第二个想法是使用单个Canvas元素并实现一些逻辑来处理像这样的层：

Test

window.addEventListener('load', function() {

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var order = 0;

function drawLayer1() {

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 55, 50);

}

function drawLayer2() {

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect (30, 30, 55, 50);

}

function draw() {

ctx.clearRect(0, 0, 256, 256);

if (order === 0) {

drawLayer1();

drawLayer2();

}

else {

drawLayer2();

drawLayer1();

}

setInterval(draw, 250);

setInterval(function() {

order = 1 - order;

}, 200);

}, false);

在上面的代码中，两层将每隔200ms更改堆叠顺序。

那么问题是哪个方式是最好的方法？这两种方法的优点和缺点是什么？

怎样在html中实现图层重叠,javascript – 在HTML5画布中实现图层相关推荐

如何在html网页中加入椭圆按钮,如何在HTML5画布中绘制椭圆形？
您可以尝试运行以下代码在HTML5画布中绘制椭圆形- 示例HTML> //画布 var c = document.getElementById('newCanvas'); var context ...
html5中画线效果标记是,HTML5画布中怎样绘制线？
线是所有复杂图形的组成基础,想要绘制复杂的的图形,首先要从绘制线开始.在绘制线之前首先要了解线的组成.一条最简单的线由三部分组成,分别为初始位置.连线端点以及描边,如图1所示. 图1 线的组成对图1 ...
html5图像调整大小,JavaScript调整HTML5画布中图像的大小
因此,如果所有浏览器(实际上,Chrome 5给我提供了一个不错的浏览器)都无法为你提供足够好的重采样质量,你该怎么办?然后,你自己实现它们!哦,来吧,我们正在进入Web 3.0的新时代,符合HTML ...
html5圆圈,javascript – 如何在HTML5画布中绘制带有文本的圆圈
看起来很简单,可以在 HTML5画布中绘制圆圈和文本,但是我得到了非直观的行为.圆形画得漂亮漂亮,然后画出的圆圈越多,旧圆圈的形状越来越八角形.对我来说很奇怪-此外,文字从旧圆圈中消失,只出现在最后绘 ...
php中网页字体颜色的代码,HTML5画布如何设置字体颜色?（代码示例）
在HTML5画布中我们可以使用fillStyle属性来设置文本的字体颜色,它可以接受一个颜色的代码值,比如#cc0000,也可以接受一个颜色的英文单词,比如red.下面我们就来了解一下,希望对大家有所 ...
html中画布中怎么画一条直线,使用EaselJS在html5画布中绘制线条
我对画架和HTML5本身非常新颖.我正试图在使用EaselJS的画布上绘制一条线. X坐标纵坐标固定为100,Y坐标纵坐标从数组列表中获得.我写的代码如下.可以请别人让我知道我哪里出错了?使用Ease ...
html画布有的电脑显示不出来桌面,不在html5画布中显示图像(javascript)
我正试图在棋盘上展示棋子.问题是:如果我让"警报(img.src)"(从而创建了很多警报框--),件会在正确的位置显示,但如果我删除警报,它只显示一件在我画布的右上角. 你觉得怎么 ...
canvas画布清空python_python在Tkinter FigureCanvasTkAgg中更新matplotlib动画，并从画布中清除循环动画...
我试图用tkinter创建一个GUI,它向我显示我捕捉到的事件的动画,当我单击一个按钮时,下一个事件应该会显示出来.到目前为止,我的代码确实做到了这一点,但我遇到的问题是,当我单击按钮显示下一个事件时 ...
html5图层重叠,如何在html5中的canvas下实现ps中的叠加效果？
侃侃无极 html5中的canvas本身的API是不存在图层概念的.要想实现实现多图层功能,必须要使用多个canvas对象,不过这些canvas对象,是在内存中的,而不是在html的元素树中.每个ca ...

怎样在html中实现图层重叠,javascript – 在HTML5画布中实现图层

怎样在html中实现图层重叠,javascript – 在HTML5画布中实现图层相关推荐

最新文章

热门文章