<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #canvas{ background:#000; } </style> </head> <body> <canvas id="canvas"></canvas> </body> </html> <script> var canvas=document.getElementById("canvas"); var ctx = canvas.getContext(‘2d‘); var WHeight=document.body.offsetHeight; var WWidth=document.body.offsetWidth ; canvas.width=WWidth; canvas.height=WHeight; var Number=1200; //控制粒子的个数 var Data=[]; Dataarc() //多个圆 function Dataarc() { for(var i=0;i<Number;i++) { Data[i]={ x:~~(Math.random()*WWidth), y:~~(Math.random()*WHeight), px:Math.random()*2, py: Math.random()*2 } console.log(Data); arc(Data[i].x, Data[i].y); } } function arc(x,y) //画圆 { ctx.save(); ctx.beginPath(); ctx.fill;//填充颜色,默认是黑色 ctx.arc(x,y,2,0,2*Math.PI,false); ctx.fill(); ctx.stroke(); } function line(x1,y1,x2,y2) //连线的线段 { ctx.save(); var linear=ctx.createLinearGradient(x1,y1,x2,y2); linear.addColorStop( 0, ‘red‘ ); linear.addColorStop( 1, ‘blue‘ ); ctx.lineWidth=1.5; ctx.strokeStyle = linear; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.closePath(); ctx.lineTo(x2, y2); ctx.stroke(); ctx.restore(); } function Motion() //控制粒子的运动和判断连线条件 { ctx.clearRect(0,0,WWidth,WHeight); if(Data!="") { for(var i=0;i<Number;i++) { if(Data[i].x<=0 ||Data[i].x>=WWidth) { Data[i].px=-Data[i].px; } if( Data[i].y>=WHeight||Data[i].y<=0) { Data[i].py=-Data[i].py; } Data[i].x=~~(Data[i].x)-~~(Data[i].px); Data[i].y=~~(Data[i].y)+~~(Data[i].py); arc(Data[i].x, Data[i].y); for(var j=i+1;j<Number;j++) { if(Math.pow(Data[i].x- Data[j].x,2)+Math.pow(Data[i].y-Data[j].y,2<2000) { line(Data[i].x,Data[i].y,Data[j].x,Data[j].y); } } } } } setInterval("Motion()","200"); //定时调用,让粒子运动 </script>
在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察
1要创建一个画布
2要创建粒子
3让粒子能够运动起来: 粒子运动不是粒子真正的在动,而是不断的重画
4判断粒子勾成连线的条件(用勾股定理)
Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。
上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。
javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。
现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容
最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。
利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似
随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力
canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径
由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上
熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js,Fabric 算是一个元老级的 canvas 库了,从第一个版本发布到现在,已经有 8 年时间了。我近一年时间也在项目中使用,作为用户简单说说感受:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!