一、设置透明度:
canvas中设置全局透明度用globalAlpha来设置,它的值基于0-1之间,默认为1表示不透明,0表示全透明。
示例如下:
在canvas中绘制了100个随机小球,其中有交叠的,也有分开的。
window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ myCanvas.width = document.documentElement.clientWidth-20;; myCanvas.height = document.documentElement.clientHeight-20;; var context =myCanvas.getContext("2d"); //globalAlpha:用来设置全局的透明度,其值基于0-1之间,默认为1表示不透明,0表示全透明 context.globalAlpha=0.5;//半透明 //随机生成100个颜色各异的圆 var r=0,g=0,g=0; for(var i=0;i<100;i++){ //生成颜色 r = Math.floor(Math.random()*255);//向下取整 g = Math.floor(Math.random()*255); b = Math.floor(Math.random()*255); //填充颜色 context.fillStyle="rgb("+r+","+g+","+b+")"; //绘制圆 context.beginPath(); //设置圆心坐标,圆半径,开始弧度,结束弧度 context.arc(Math.random()*myCanvas.width,Math.random()*myCanvas.height,Math.random()*100,0,Math.PI*2); context.closePath(); //填充圆 context.fill(); } }else{ return false; } }
二、设置交叠效果:
设置交叠效果用globalCompositeOperation,它有11种效果,分别为:source-over、source-atop、source-in、source-out、destination-over、destination-atop、destination-in、destination-out、lighter、copy、xor。具体效果图大家可以看看附件来感受一下。
效果图示例代码如下:
页面结构:
<style type="text/css"> #button{width:1200px;margin:10px auto;clear:both;} #button a{font-size:18px;display:block;float:left;margin-right:14px;} </style> <canvas id="myCanvas" style="height:100%;display:block;margin:0 auto;border:1px solid #aaa;"> 您的浏览器不支持canvas,请换个浏览器试试 <!--这句话在支持canvas的浏览器中会被忽略,不支持的则会显示出来--> </canvas> <div id="button"> <a href="#">source-over</a> <a href="#">source-atop</a> <a href="#">source-in</a> <a href="#">source-out</a> <a href="#">destination-over</a> <a href="#">destination-atop</a> <a href="#">destination-in</a> <a href="#">destination-out</a> <a href="#">lighter</a> <a href="#">copy</a> <a href="#">xor</a> </div>
JS代码:
window.onload=function(){ draw("source-over");//默认 //为各个A标签添加click事件 var buttons = document.getElementById("button").getElementsByTagName("a"); for(var i=0;i<buttons.length;i++){ buttons[i].onclick=function(){ draw(this.text); return false; } } } /** *该方法用来绘制图形 *@param compositeStyle:图形属性 */ function draw(compositeStyle){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ myCanvas.width = document.documentElement.clientWidth-20; myCanvas.height = document.documentElement.clientHeight-50; var context =myCanvas.getContext("2d"); context.clearRect(0,0,myCanvas.width,myCanvas.height); //设置样式 context.font="bold 40px Arial"; context.textAlign="center"; context.textBaseline="middle"; context.fillStyle="#058"; context.fillText("globalCompositeOperation="+compositeStyle,myCanvas.width/2,60); //绘制一个矩形 context.fillStyle="blue"; //在(x,y)的位置绘制一个长宽均为400的矩形 var x = (myCanvas.width-400)/2; var y = (myCanvas.height-500)/2; context.fillRect(x,y,400,400); //设置重叠效果 context.globalCompositeOperation=compositeStyle; //绘制一个三角形 context.fillStyle="red"; context.beginPath(); var x1 = x+200,y1 = y+200; var x2 = x-100,y2 = y+500; var x3 = x+500,y3 = y+500; context.moveTo(x1,y1); context.lineTo(x2,y2); context.lineTo(x3,y3); context.closePath(); context.fill(); }else{ return false; } }
应用示例如下:绘制了100个随机小球,并让其在canvas画布中运动。
页面结构跟前面的一样的,这里就不赘述了,直接上JS代码:
var ball = new Array(); var interval=null; window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ myCanvas.width = document.documentElement.clientWidth-20; myCanvas.height = document.documentElement.clientHeight-50; var context =myCanvas.getContext("2d"); //绘制图形 drawBall(context,"source-out"); //为各个A标签添加click事件 var buttons = document.getElementById("button").getElementsByTagName("a"); for(var i=0;i<buttons.length;i++){ buttons[i].onclick=function(){ drawBall(context,this.text); return false; } } }else{ return false; } } //该方法用来随机生成100个圆球 function initBall(){ ball.splice(0,ball.length); //随机生成100个颜色各异的圆 var r=0,g=0,g=0,radius=0,aBall=null; for(var i=0;i<100;i++){ //生成颜色 r = Math.floor(Math.random()*255);//向下取整 g = Math.floor(Math.random()*255); b = Math.floor(Math.random()*255); radius = Math.random()*50+20;//半径 aBall={ color:"rgb("+r+","+g+","+b+")", radius:radius, x:Math.random()*(myCanvas.width-2*radius)+radius, y:Math.random()*(myCanvas.height-2*radius)+radius, vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)), vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)) }; ball[i]=aBall; } } function drawBall(cxt,compositeStyle){ clearInterval(interval); initBall();//生成100个圆球 interval = setInterval(function(){ draw(cxt,compositeStyle); updateBall(cxt.canvas.width,cxt.canvas.height); console.log("123 "+ball.length); },100); } /** *该方法用来绘制图形 *@param cxt:canvas的上下文环境 *@param compositeStyle:图形属性 */ function draw(cxt,compositeStyle){ var myCanvas = cxt.canvas; cxt.clearRect(0,0,myCanvas.width,myCanvas.height); //设置样式 cxt.font="bold 40px Arial"; cxt.textAlign="center"; cxt.textBaseline="middle"; cxt.fillStyle="#058"; cxt.fillText("globalCompositeOperation="+compositeStyle,myCanvas.width/2,60); //设置重叠效果 cxt.globalCompositeOperation=compositeStyle; //绘制小球 for(var i=0;i<ball.length;i++){ cxt.fillStyle=ball[i].color;//填充颜色 cxt.beginPath(); cxt.arc(ball[i].x,ball[i].y,ball[i].radius,0,2*Math.PI,true);//绘制弹跳小球 cxt.closePath(); cxt.fill();//给小球填充颜色 } } //小球的运动 function updateBall(width,height){ for(var i=0;i<ball.length;i++){ ball[i].x +=ball[i].vx; ball[i].y +=ball[i].vy; if(ball[i].x-ball[i].radius<=0){ ball[i].vx = -ball[i].vx; ball[i].x=ball[i].radius; } if(ball[i].x+ball[i].radius>=width){ ball[i].vx = -ball[i].vx; ball[i].x=width-ball[i].radius; } if(ball[i].y-ball[i].radius<=0){ ball[i].vy = -ball[i].vy; ball[i].y=ball[i].radius; } if(ball[i].y+ball[i].radius>=height){ ball[i].vy = -ball[i].vy; ball[i].y=height-ball[i].radius; } } }
注:这个示例中有个问题,globalCompositeOperation属性值切换的勤了很容易卡死。琢磨了好几遍代码都没找到问题所在(可能也不是个问题) ,有同道中人能看出问题所在的还请留个言,不胜感激。
最后,感谢老师的分享!
相关推荐
HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及...这些代码覆盖了上述所有知识点,是学习和探索Canvas技术的理想资源。
HTML5 Canvas核心技术:图形、动画与游戏开发 HTML5 Canvas核心技术:图形、动画与游戏开发
首先,Canvas是一个基于矢量图形的二维画布,通过JavaScript进行编程操作。开发者可以使用它来绘制线条、形状、图像,并进行颜色填充和透明度控制。Canvas API提供了丰富的绘图方法,如`fillRect()`用于填充矩形,`...
HTML5 Canvas核心技术 图形、动画与游戏开发
它不仅全面讲解了Canvas元素的API,以及如何利用Canvas进行图形绘制、动画制作、物理效果模拟、碰撞检测、游戏开发、移动应用开发,还包含大量实例:可操作性极强。 《HTML5Canvas核心技术:图形动画与游戏开发》...
HTML5 Canvas核心技术:图形、动画与游戏开发 - (美)基瑞(Geary,D.)著
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、...
1. **帧动画原理**:通过不断清除Canvas并重新绘制下一帧,实现连续的视觉效果。 2. **时间戳与requestAnimationFrame**:利用`Date.now()`获取当前时间戳,结合`requestAnimationFrame`函数创建流畅的动画。 3. **...
在这个"HTML5 Canvas核心技术图形、动画与游戏开发"的PDF扫描版中,读者可以深入学习到Canvas的核心概念和实践技巧。 首先,Canvas的基本使用方法是通过JavaScript API来实现的。这个API提供了大量的绘图命令,如`...
- **2.4 颜色与透明度**:讲解如何设置绘制颜色以及如何调整透明度。 - **2.5 渐变色与图案** - **2.5.1 渐变色**:介绍如何使用`createLinearGradient()`和`createRadialGradient()`来创建线性和径向渐变。 - **...
这个"HTML5 Canvas核心技术 图形、动画与游戏开发配套源码"提供了一系列的示例代码,帮助学习者深入理解Canvas的使用方法。 一、HTML5 Canvas基础 Canvas是HTML5的一个核心元素,通过JavaScript API来实现绘图。它...
在Canvas中,我们可以通过设置颜色的透明度(alpha值)来实现遮罩效果。使用`fillStyle`属性设置填充颜色,并使用`beginPath()`, `moveTo()`, `lineTo()`等方法定义遮罩形状,然后调用`fill()`填充该形状。 **平行...
《HTML5 Canvas核心技术:图形、动画与游戏开发》中,畅销书作家David Geary(基瑞)先生以实用的范例程序直接切入这套API,全面讲解其功能,以求让读者实现出内容丰富且界面一致的网络应用程序,并将开发好的程序...
《HTML5 Canvas核心技术图形动画与游戏开发》此书为...本书从基础知识,绘制,文本,图像,视频,动画,精灵,物理效果,碰撞,游戏开发,自定义控件,移动平台开发的目录形式由简单到难的进行学习H5 Canvas核心技术
CSS3在这个实例中的作用可能主要在于布局和样式设置,例如为canvas元素设置尺寸、位置,或者通过CSS3过渡和动画来增强视觉效果。例如,可以使用`transition`属性来平滑地改变某个属性,或者使用`@keyframes`规则定义...
总之,"vue+canvas绘制图形"项目展示了如何利用Vue的组件化思想和Canvas的绘图能力,创建出具有动态效果和用户交互的前端应用。通过学习和实践这种方式,开发者可以提高自己的前端技能,为网页带来更丰富的视觉体验...