HTML5中的Canvas绘图操作(五)
来源:互联网 发布:软件测试发展趋势 编辑:程序博客网 时间:2024/05/16 08:33
好吧这个系列终于要完了,继续展示特效效果。
幻灯片效果:
这个很简单,无非是建立一个定时器去刷新图片。
<!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 animationsetInterval(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 animationsetInterval(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 onload="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 rectsflakeTimer = 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 regionbufferCanvasCtx.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 onecontext.drawImage(bufferCanvas, 0,0,bufferCanvas.width, bufferCanvas.height);context.restore();}</script></head><body onload="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");
- HTML5中的Canvas绘图操作(五)
- HTML5中的Canvas绘图操作(一)
- HTML5中的Canvas绘图操作(二)
- HTML5中的Canvas绘图操作(三)
- HTML5中的Canvas绘图操作(四)
- HTML5 canvas画布(五)
- 关于RGraph(html5 canvas )绘图
- (17)HTML5-Canvas画布基础绘图
- HTML5 Canvas绘图基础(待更新)
- html5(二)canvas绘图渐变
- H5基础(5)-HTML5绘图canvas
- HTML5-Canvas绘图
- html5-Canvas绘图
- HTML5 Canvas 绘图入门
- HTML5 Canvas 绘图入门
- HTML5-canvas 绘图
- HTML5 Canvas绘图API
- HTML5.Canvas绘图
- 求二元查找树的镜像
- 对话框用法总结
- CF邪恶语录
- jquery为js做的鼠标点击事件
- matlab 各种函数详解(收集)
- HTML5中的Canvas绘图操作(五)
- JNI编程之如何传递参数(二)——数组类型的传递
- 如何在win7下装ubuntu(硬盘版安装)
- 1.显示的字段要有老师name, age 每个老师所带的学生人数,2 只列出老师age为40以下学生age为12以上的记录
- 悟透JavaScript之初看原型 --- (1)
- BOOL,int,float,指针类型的变量a 与“零”的比较语句
- 挖挖Hive的代码(三)——生成MapReduce(中)
- 悟透JavaScript之初看原型 --- (2)
- 【hdu】 find the most comfortable road (并查集)