HTML5中的Canvas绘图操作（五）

最新推荐文章于 2023-10-25 17:52:26 发布
最新推荐文章于 2023-10-25 17:52:26 发布
阅读量1.2k 收藏
点赞数
分类专栏： HTML5/CSS/JavaScript Android移动开发 文章标签： html5 function image buffer

好吧这个系列终于要完了，继续展示特效效果。


幻灯片效果：

这个很简单，无非是建立一个定时器去刷新图片。

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Canvas Image Rotator Example</title>
		<script type="text/javascript">
			var imagePaths = [
				"images/j0149014.jpg", "images/j0149024.jpg", "images/j0149029.jpg", "images/j0178677.jpg"
			];
			var showCanvas = null;
			var showCanvasCtx = null;
			var img = document.createElement("img");
			var currentImage = 0;

			window.onload = function () {
				showCanvas = document.getElementById('showCanvas');
				showCanvasCtx = showCanvas.getContext('2d');
				
				img.setAttribute('width','600');
				img.setAttribute('height','400');
				switchImage();
				
				// start the animation
				setInterval(switchImage,3000);
			}
			
			function switchImage() {
				img.setAttribute('src',imagePaths[currentImage++]);
				img.onload = function() {
					if (currentImage >= imagePaths.length)
						currentImage = 0;
					
					showCanvasCtx.drawImage(img,0,0,600,400);
				}
			}
		</script>
	</head>
	<body>
		<canvas id='showCanvas' width='600' height='400'>
			Canvas Not Supported
		</canvas>
	</body>
</html>

对于幻灯片效果做一下平滑处理，主要用到了globalAlpha： 

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Canvas Image Rotator Example</title>
		<script type="text/javascript">
			var imagePaths = [
				"images/j0149014.jpg", "images/j0149024.jpg", "images/j0149029.jpg", "images/j0178677.jpg"
			];
			var showCanvas = null;
			var showCanvasCtx = null;
			var img = document.createElement("img");
			var currentImage = 0;
			var revealTimer;

			window.onload = function () {
				showCanvas = document.getElementById('showCanvas');
				showCanvasCtx = showCanvas.getContext('2d');
				
				img.setAttribute('width','600');
				img.setAttribute('height','400');
				switchImage();
				
				// start the animation
				setInterval(switchImage,3000);
			}
			
			function switchImage() {
				img.setAttribute('src',imagePaths[currentImage++]);
				if (currentImage >= imagePaths.length)
					currentImage = 0;
				
				showCanvasCtx.globalAlpha = 0.1;
				revealTimer = setInterval(revealImage,100);
			}
			
			function revealImage() {
				showCanvasCtx.save();
				showCanvasCtx.drawImage(img,0,0,600,400);
				showCanvasCtx.globalAlpha += 0.1;
				if (showCanvasCtx.globalAlpha >= 1.0)
					clearInterval(revealTimer);
				showCanvasCtx.restore();
			}
		</script>
	</head>
	<body>
		<canvas id='showCanvas' width='600' height='400'>
			Canvas Not Supported
		</canvas>
	</body>
</html>

一个简单的动画绘制： 

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Canvas Test With No Buffering</title>
		<script type="text/javascript">
			var rectY=200, rectW=40;
			var rectX = -rectW;
			var canvas = null;
			var context = null;
			function init() {
				canvas = document.getElementById('testCanvas');
				context = canvas.getContext("2d");
				
				blank();

				context.fillStyle= "yellow";
				context.fillRect(rectX,rectY,rectW,rectW);
				setInterval(anim, 30);
			}
			
			function blank() {
				context.fillStyle = "#00ddee";
				context.fillRect(0,0,context.canvas.width, context.canvas.height);
			}

			function anim() {
				if (rectX < context.canvas.width) {
					blank();
					rectX += 5;
					context.fillStyle = "yellow";
					context.strokeStyle = "red";
					context.lineWidth = 3;
					context.fillRect(rectX,rectY,rectW,rectW);
					context.strokeRect(rectX,rectY,rectW,rectW);
				}
				else rectX=-rectW;
			}			
		</script>
	</head>
	<body οnlοad="init()">
		<canvas id="testCanvas" width="400" height="400">
			Canvas not supported
		</canvas>
	</body>
</html>

加上双缓冲之后，画面不再闪烁： 

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Canvas Test Using Double Buffering</title>
		<script type="text/javascript">
			var canvas = null;
			var context = null;
			var bufferCanvas = null;
			var bufferCanvasCtx = null;
			var flakeArray = [];
			var flakeTimer = null;
			var maxFlakes = 200;

			function Flake() {
			    this.x = Math.round(Math.random() * context.canvas.width);
			    this.y = -10;
			    this.drift = Math.random();
			    this.speed = Math.round(Math.random() * 5) + 1;
			    this.width = (Math.random() * 3) + 2;
			    this.height = this.width;
			}
			
			function init() {
				canvas = document.getElementById('testCanvas');
				context = canvas.getContext("2d");
				
				bufferCanvas = document.createElement("canvas");
				bufferCanvasCtx = bufferCanvas.getContext("2d");
				bufferCanvasCtx.canvas.width = context.canvas.width;
				bufferCanvasCtx.canvas.height = context.canvas.height;

				// initialize the rects
				flakeTimer = setInterval(addFlake, 200);
		
				Draw();
				
				setInterval(animate, 30);
			}

			function addFlake() {
			    flakeArray[flakeArray.length] = new Flake();
			    if (flakeArray.length == maxFlakes)
			        clearInterval(flakeTimer);
			}

			function blank() {
				bufferCanvasCtx.fillStyle = "#330033";
				bufferCanvasCtx.fillRect(0,0,bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
			}

			function animate() {
				Update();
				Draw();
			}

			function Update() {
			    for (var i = 0; i < flakeArray.length; i++) {
                    if (flakeArray[i].y < context.canvas.height) {
                        flakeArray[i].y += flakeArray[i].speed;
                        if (flakeArray[i].y > context.canvas.height)
                            flakeArray[i].y = -5;
                        flakeArray[i].x += flakeArray[i].drift;
                        if (flakeArray[i].x > context.canvas.width)
                            flakeArray[i].x = 0;
                    }
			    }
			}
			
			function Draw(){
				context.save();
/*
				// create a clipping region
				bufferCanvasCtx.beginPath();
				bufferCanvasCtx.fillStyle="black";
				bufferCanvasCtx.fillRect(0,0,bufferCanvas.width,bufferCanvas.height);
				bufferCanvasCtx.arc(bufferCanvas.width/2,bufferCanvas.height/2,bufferCanvas.height/3,0,2*Math.PI);
				bufferCanvasCtx.clip();
*/
				blank();

				for (var i = 0; i < flakeArray.length; i++) {
				    bufferCanvasCtx.fillStyle = "white";
				    bufferCanvasCtx.fillRect(flakeArray[i].x,flakeArray[i].y,flakeArray[i].width,flakeArray[i].height);
				}
				
				// copy the entire rendered image from the buffer canvas to the visible one
				context.drawImage(bufferCanvas, 0,0,bufferCanvas.width, bufferCanvas.height);
				context.restore();
			}
		</script>
	</head>
	<body οnlοad="init()">
		<canvas id="testCanvas" width="800" height="800">
			Canvas not supported
		</canvas>
	</body>
</html>
主要是通过以下代码创建了一个Canvas，之后将在这个Canvas上绘制完毕后拷贝到显示Canvas上。
bufferCanvas = document.createElement("canvas");
bufferCanvasCtx = bufferCanvas.getContext("2d");



Soloman
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘制图像 保存_如何使用Node.js和Canvas创建和保存图像
cuk0051的博客
08-27 2330
canvas绘制图像 保存I share my blog posts on Twitter, and there’s been a time when I entertained myself drawing drawing an image for each blog post. 我在Twitter上分享我的博客文章，有时候我会为每个博客文章绘制图像来娱乐自己。 I set up Hugo...
HTML5 读取XML数据 画图
06-09
简易的HTML5 读取XML数据， 然后根据 XML中的数据用canvas的“绘图模式”画图
Canvas的缓冲区
最新发布
qq_21476953的博客
10-25 167
在传统的 canvas 绘图中，绘制操作是即时执行的，意味着一旦调用绘图 API 绘制图形，绘制指令就会立即发送到绘图设备进行处理，然后绘制缓冲区的内容会被复制到显示缓冲区并进行显示。canvas的绘制缓冲区和显示缓冲区理解为两个容器，它们用于存储绘制结果。绘制缓冲区是用于存储渲染管线生成的像素数据，而显示缓冲区是绘制缓冲区最终的存储位置。，绘制缓冲区的内容一般会被复制到显示缓冲区中，并在屏幕上进行显示。，是指所有的绘制指令已经被发送到绘图设备（如 GPU）进行处理，并且绘制缓冲区中的图像已经被更新。
[cache和buffer的区别]canvas的缓冲绘图
Win32FanEx 的专栏
08-23 851
canvas的缓冲绘图涉及到两个概念，一是“双缓冲”，二是"预渲染"。 双缓冲历史已久。记得当年学习windows编程时就用到了双缓冲技术，先在内存中开辟一块画布，在上面执行完绘制操作后，把该内存画布作为一幅图片整体投射到屏幕上。这样可以避免显示器闪烁。 而预渲染则是把图画中常用到的一些背景部分预先画到一个buffer上，当动画中需要显示该部分时，直接从buffer上拷过来用就行了。 "双缓冲"和"预渲染"是两个不同的技术。需要注意的是：在html5 canvas编程中，已不需要双缓冲了。因为浏览器已
html5选择状态,HTML5 Canvas 状态
weixin_32495691的博客
05-31 93
HTML5 Canvas 状态我们在canvas上绘制图形的时候，经常需要通过save()和restore()改变2D上下文的状态。举例来说，你在绘制直线或矩形的时候需要一种strokStyle，在绘制下一条直线或矩形的时候需要另一种strokStyle。又或者是不同的填充色，旋转角度等当使用其2D上下文在HTML5画布上进行绘制时，该2D上下文处于某种状态。您可以通过操纵2D上下文属性(例如fi...
html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、渐变填充、图案填充、文本的属性设置）...
weixin_36317502的博客
06-02 90
(1)文本的描边、填充、阴影(2)文本的渐变填充(3)文本的图案填充(4)文本的属性设置及效果呈现交互绘制文本.html交互绘制文本body {background: #eeeeee;}#canvas {margin-left: 10px;-webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;-moz-box-shadow: rgba(0, 0, 0...
提高HTML5 canvas性能的几种方法！
热门推荐
刀刀的专栏
03-29 2万+
简介 HTML5 canvas 最初起源于苹果（Apple）的一项实验，现在已经成为了web中受到广泛支持的2D快速模式绘图（2D immediate mode graphic）的标准。许多开发者现在利用它来实现众多的多媒体项目、可视化醒目以及游戏等等。然而，随着我们构建的应用程序的复杂度的增加，我们难免会遇到所谓的性能问题。 已经存在众多优化canvas性能的方法了，但是还没有一篇文章将这些
使用HTML5canvas进行Web绘图
02-26
HTML5canvas元素的出现填补了这种不足，开发人员可以使用JavaScript脚本语言在canvas中进行一系列基于命令的图形绘制操作，本文将通过讲解如何使用canvas元素进行基本绘图操作，以及完成简单的动画和用户交互任务，...
详解Html5 Canvas画线有毛边解决方法
09-28
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML5 Canvas的事件处理介绍
01-21
比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$(‘#p1’).click(function(){…})。然而这种DOM处理方法在HTML5...
html5-Canvas可以在web中绘制各种图形
12-30
在html5中我觉得最重要的就是引入了Canvas，使得我们可以在web中绘制各种图形。给人感觉单在这点上有点模糊我们web和桌面程序的感觉。在html5外web中也有基于xml的绘图如：VML、SVG。而Canvas为基于像素的绘图。...
Android的硬件加速
weixin_34319374的博客
10-23 600
      Android从3.0（API Level 11）开始，在绘制View的时候支持硬件加速，充分利用GPU的特性，使得绘制更加平滑，但是会多消耗一些内存。       开启或关闭硬件加速：       由于硬件加速自身并非完美无缺，所以Android提供选项来打开或者关闭硬件加速，默认是关闭。可以在4个级别上打开或者关闭硬件加速：       Application级别：&lt;a...
谈谈canvas的性能优化（主要讲缓存问题）
dfpbut5000的博客
02-25 1924
　　声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 　　canvas玩多了后，就会自动的要开始考虑性能问题了。怎么优化canvas的动画呢？ 　　【使用缓存】 　　使用缓存也就是用离屏canvas进行预渲染了，原理很简单，就是先绘制到一个离屏canvas中，然后再通过drawImage把离屏canvas画到主canvas中。可能看到这很多人就会误解，这不是写游戏里面用...
小程序canvas生成海报
chaosama的博客
10-31 885
前言：为毛会有个showTop:50呢，是因为我一开始听说canvas不能隐藏，为了赶项目就让隐藏的时候把它往上-500就不见了。但是刚做了个新的，发现是可以的。有兴趣的话可以自己优化下。 wxml <view class="canvas-v"> <view style="width:80%"> <view> &...
java canvas双缓存_HTML5canvas双缓冲_测试
weixin_39693662的博客
02-28 105
// ZC: 缓冲画布var g_canvasBuffer = null;var g_canvasBufferContext = null;var g_iWidth = 800;var g_iHeight= 600;window.onload = function(){// *** *** ***// ZC: 网页上的控件var canvas = document.getElementById("...
Canvas缓冲绘制
u011959433的专栏
06-07 982
private Paint paint; private Canvas mBufferCanvas; private Bitmap mBufferBitmap; @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()){
canvas绘图总结——双缓冲绘图、拖动、缩放的实现
JuicyActiveGilbert的博客
05-11 3653
双缓冲 web中canvas绘图并未自带双缓冲绘图机制。为了使绘图更加流畅以及不出现闪屏的情况，思考使用双缓冲绘图来解决该问题。解决该问题最大的突破点在于canvas支持在canvas上绘制另一个canvas。实现方式如下： var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'...
TypeArray、ArrayBuffer、Blob、File、DataURL、canvas的相互转换
yinwhm12的博客
06-20 6214
Blob to ArrayBuffer var blob = new Blob([data], {type: ‘text/plain‘}); var reader = new FileReader(); reader.onload = function(e) { callback(e.target.result);}; reader.readAsArrayBuffer(blob);
HTML5 中canvas是什么
05-26
在HTML5中，canvas是一个用于绘制图形、动画等的HTML元素。它提供了一组绘制API，可以通过JavaScript脚本来操作canvas，实现各种绘图效果。使用canvas可以绘制简单的图形，如线条、矩形、圆形等，也可以绘制复杂的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值