Using Multiple HTML5 Canvases as Layers

最新推荐文章于 2022-09-28 18:26:51 发布
最新推荐文章于 2022-09-28 18:26:51 发布
阅读量1k 收藏
点赞数
分类专栏： HTML5



Here's the source code.
This example is coded for readability and not for optimized operation. All you need is a text editor like notepad, a copy of the image city.png (rightclick and save it) and an HTML5 friendly browser (I'm using Firefox 3.6).

You can copy this code and paste it into a new file called something like layers.html with the city.png image http://html5.litten.com/layers/city.png (they must be in the same directory) and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the stacked canvases.

  
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Layers Test</title>
</head>
<body>
<section>
<div id="canvasesdiv" style="position:relative; width:400px; height:300px">
<canvas id="layer1"
style="z-index: 1;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer2"
style="z-index: 2;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer3"
style="z-index: 3;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">
var layer1;
var layer2;
var layer3;
var ctx1;
var ctx2;
var ctx3;
var x = 400;
var y = 300;
var dx = 2;
var dy = 4;
var WIDTH = 400;
var HEIGHT = 300;
var city = new Image();

function init() {
city.src ="city.png";
layer1 = document.getElementById("layer1");
ctx1 = layer1.getContext("2d");
layer2 = document.getElementById("layer2");
ctx2 = layer2.getContext("2d");
layer3 = document.getElementById("layer3");
ctx3 = layer3.getContext("2d");
setInterval(drawAll, 20);
}

function drawAll() {
draw1();
draw2();
draw3();
}

function draw1() {
ctx1.clearRect(0, 0, WIDTH, HEIGHT);
ctx1.fillStyle = "#FAF7F8";
ctx1.beginPath();
ctx1.rect(0,0,WIDTH,HEIGHT);
ctx1.closePath();
ctx1.fill();
ctx1.fillStyle = "#444444";
ctx1.beginPath();
ctx1.arc(x, y, 10, 0, Math.PI*2, true);
ctx1.closePath();
ctx1.fill();

if (x + dx > WIDTH || x + dx < 0)
dx = -dx;
if (y + dy > HEIGHT || y + dy < 0)
dy = -dy;

x += dx;
y += dy;
}

function draw2() {
ctx2.clearRect(0, 0, WIDTH, HEIGHT);
ctx2.drawImage(city, 0, 0);
}

function draw3() {
ctx3.clearRect(0, 0, WIDTH, HEIGHT);
ctx3.fillStyle = "#444444";
ctx3.save();
ctx3.translate(200,200);
ctx3.rotate(x/20);
ctx3.fillRect(-15, -15, 30, 30);
ctx3.restore();
}

init();
</script>
</section>
</body>
</html>




http://html5.litten.com/using-multiple-html5-canvases-as-layers/

Here's the source code.
This example is coded for readability and not for optimized operation. All you need is a text editor like notepad, a copy of the image city.png (rightclick and save it) and an HTML5 friendly browser (I'm using Firefox 3.6).

You can copy this code and paste it into a new file called something like layers.html with the city.png image http://html5.litten.com/layers/city.png (they must be in the same directory) and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the stacked canvases.

  
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Layers Test</title>
</head>
<body>
<section>
<div id="canvasesdiv" style="position:relative; width:400px; height:300px">
<canvas id="layer1"
style="z-index: 1;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer2"
style="z-index: 2;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer3"
style="z-index: 3;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">
var layer1;
var layer2;
var layer3;
var ctx1;
var ctx2;
var ctx3;
var x = 400;
var y = 300;
var dx = 2;
var dy = 4;
var WIDTH = 400;
var HEIGHT = 300;
var city = new Image();

function init() {
city.src ="city.png";
layer1 = document.getElementById("layer1");
ctx1 = layer1.getContext("2d");
layer2 = document.getElementById("layer2");
ctx2 = layer2.getContext("2d");
layer3 = document.getElementById("layer3");
ctx3 = layer3.getContext("2d");
setInterval(drawAll, 20);
}

function drawAll() {
draw1();
draw2();
draw3();
}

function draw1() {
ctx1.clearRect(0, 0, WIDTH, HEIGHT);
ctx1.fillStyle = "#FAF7F8";
ctx1.beginPath();
ctx1.rect(0,0,WIDTH,HEIGHT);
ctx1.closePath();
ctx1.fill();
ctx1.fillStyle = "#444444";
ctx1.beginPath();
ctx1.arc(x, y, 10, 0, Math.PI*2, true);
ctx1.closePath();
ctx1.fill();

if (x + dx > WIDTH || x + dx < 0)
dx = -dx;
if (y + dy > HEIGHT || y + dy < 0)
dy = -dy;

x += dx;
y += dy;
}

function draw2() {
ctx2.clearRect(0, 0, WIDTH, HEIGHT);
ctx2.drawImage(city, 0, 0);
}

function draw3() {
ctx3.clearRect(0, 0, WIDTH, HEIGHT);
ctx3.fillStyle = "#444444";
ctx3.save();
ctx3.translate(200,200);
ctx3.rotate(x/20);
ctx3.fillRect(-15, -15, 30, 30);
ctx3.restore();
}

init();
</script>
</section>
</body>
</html>




http://html5.litten.com/using-multiple-html5-canvases-as-layers/
logcabin
关注
专栏目录
HTML5 - Chrome中canvas标签显示图片空白问题
bigodawn的专栏
10-31 3304
一、问题： Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image(); img.src="1.jpg"; cxt.drawImage(img,0,0,500,
crossorigin属性：为什么它是避免tainted canvases的关键？
weixin_44384265的博客
10-10 881
crossorigin是跨域资源共享在HTML标签上的应用。本文我将会基于HTML标准2.5.4，给你从里至外剖析crossorigin属性
canvasEditor:HTML画布编辑器
05-21
canvas编辑器 HTML画布编辑器 < html > < head > < title > Canvas editor </ title > < script src =" http://code.jquery.com/jquery-latest.min.js " type =" text/javascript " > </ script > < script type =" text/javascript " src =" canvas-editor.js " > </ script > < link media =" all " rel =" stylesheet " href =" canvas-editor.css " > < link media =" all " rel =" stylesheet " href =" htt
html5学习笔记1
code旅行者的专栏
01-07 1686
Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(0,50); cxt.lineTo(70,80);
go.js的基本使用(主要是vue,react同理)
luofei_create的博客
09-28 6214
go.js的基本使用，在vue中使用go.js完成业务逻辑，解析部分文档内容，代码中有详细注解
WebView加载网页时出现“Sorry,you browser seems not to support the HTML 5 canvas element ”
weixin_34088838的博客
01-08 515
webView=(WebView)findViewById(R.id.webshow); webView.loadUrl(urlString); 出错代码。     什么是 Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 如果您计划使用Ja...
本插件是一个弹幕发生器利用HTML5canvasES6来实现普通弹幕和高级弹幕发送
08-12
《HTML5 Canvas与ES6实现弹幕生成器详解》 在现代互联网的互动体验中，弹幕已经成为一种独特的交流方式，特别是在视频分享平台和直播领域。本插件以HTML5的Canvas元素和ES6（ECMAScript 2015）语言特性为基础，实现...
UI Preview for Prefabs and Canvases 1.0.5.unitypackage
最新发布
03-04
Unity插件，UI Preview for Prefabs and Canvases，最新版（截至上传日期2023年03月04日）。 官方支持Unity2019.4.35及以上。 本人于Unity2020.3.34f1实测，日常使用。 检查器中的 UI 预制件预览 它的工作方式与...
html canvas 优化,提高HTML5 canvas性能的几种方法（转）
weixin_42127783的博客
06-04 585
简介HTML5 canvas 最初起源于苹果(Apple)的一项实验，现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准。许多开发者现在利用它来实现众多的多媒体项目、可视化醒目以及游戏等等。然而，随着我们构建的应用程序的复杂度的增加，我们难免会遇到所谓的性能问题。已经存在众多优化canvas性能的方法了，但是还没有一篇文章将这些方法系统的...
HTML5七夕情人节表白网页(幻化3D相册) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5学生网页设计作业成品模板
11-16 1203
HTML5七夕情人节表白网页❤幻化3D相册❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。 ????文章末尾-已经附上源码下载地址 ????作者主页-更多源码 ????100款七夕情人节告白源码-专栏文章 作品介绍 1.网页作品简介 ：基
在canvas上面拖拽对象。
weixin_30915951的博客
04-12 399
原文：https://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/ 下面作者的原始的版本会抖动一下（鼠标刚点下去的时候，位置会发生一下突变，不是很友好）， 我修改了 一下。 var xDown , yDown;function myDown(e){ if (e.pageX < x + 15 + canvas.of...
Chrome无法打开WebGL的解决方法
热门推荐
悲欢离合的博客
07-18 4万+
在用Chrome打开WebGL时无法打开的解决办法
HTML5之CANVAS 用法示例汇总
我的英文站点：https://iorilan.medium.com/
06-29 1846
Your browser does not support the canvas element. Your browser does not support the canvas element.Your browser does not support the canvas element.Your browser does not supp
HTML使用canvas载入图片
乞力马扎罗的雪CYF的博客
09-27 3136
（1）JS实现代码如下： /** * Created by chenyufeng on 15/9/27. */ var CANVAS_WIDTH = 500, CANVAS_HEIGHT = 500; var mycanvas,context; window.onload = function(){ createCanvas(); drawImage(); }; fu
HTML5 Canvas绘图之文字的渲染
Daisy花园
02-09 1万+
文字渲染基础context.font=”bold 40px Arial” font属性可以接受css的font属性context.fillText(string,x,y,[maxlen]) string指定位置，(x,y)指定位置 context的fillestyle属性设置字体属性 maxlen可选，表示绘制这段文字最长的宽度window.onload=function(){ v
HTML 5 canvas —— 基本语法
Mr. David 专栏
09-29 1170
目录简述 canvas 基础 2D context API 基本线条 路径 插入图像 像素级操作 文字 阴影 颜色渐变 小节 简述HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 ca
HTML5权威指南笔记：36-使用canvas元素（2）
u011069189的博客
11-06 377
1 用路径绘图基本路径方法： 名称 说明 返回 beginPath() 开始一条新路径 void closePath() 尝试闭合现有路径，方法是绘制一条线，连接最后那条线的终点与初始坐标 void fill() 填充用子路径描述的图形 void isPointlnPath(x, y) 如果指定的点在当前路径所描述的图形之内则返回true 布
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值