打造高大上的Canvas粒子(一)
HTML5 Canvas
<canvas>标签定义图形,比如图表和其他图像,必须用脚本(javascript)绘制图形.
举例:绘制矩形
<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //找到canvas元素 ctx.fillStyle = "#FF0000"; //创建context对象 ctx.fillRect(0,0,150,75);
//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形:
//设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。
//fillRect(x,y,width,height); 定义去腥的填充方式
</script>
打造Canvas粒子动画
效果:
创建步骤:
<canvas id="myCanvas" width="900" height="592">您的浏览器不支持canvas</canvas> <script> /** * 参数描述 * image:image或者canvas对象 * sx,sy 源对象的x,y坐标 可选 * sWidth,sHeight 源对象的宽高 可选 * dx,dy画布上x,y坐标 * dWidth,dHeight 在画布上绘制的宽高 可选 * stx.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight); */ (function(){ var canvas = {}, image = {}, ctx = null; var particles = []; //获取canvas元素 var canvas = document.getElementById('myCanvas'); if(canvas.getContext) { //获取渲染上下文 ctx = canvas.getContext('2d'); //设置画布大小为屏幕宽高 canvas.w = canvas.width = document.body.clientWidth; canvas.h = canvas.height = document.body.clientHeight; // console.log(canvas); //新建一个image对象 var img = new Image(); //图像加载完后 img.onload = function() { //把图像信息保存在image里面 image.obj = img; image.w = img.width; image.h = img.height; image.x = parseInt(canvas.w/2 - image.w/2); image.y = 150; //把图像绘制到画布坐标为(100,100)的地方 ctx.drawImage(image.obj,image.x,image.y,image.w,image.h); // 获取图像的像素信息,并根据像素信息重新绘制出粒子效果轮廓图,canvas有一个叫getImageData的接口,通过该接口可以获取到画布上指定位置的全部像素的数据: image.imageData = ctx.getImageData(image.x,image.y,image.w,image.h); console.log(image.imageData); // //计算出符合要求的像素 calculate(); //计算后绘到画布上 draw(); }; //设置image的source img.src = 'img/pumpkin_evil.png'; } //计算并保存坐标 function calculate() { var len = image.imageData.length; //只保存100行,100列的像素值 var cols = 100, rows = 100; //设成150行,100列后每个单元的宽高 var s_width = parseInt(image.w/cols), s_height = parseInt(image.h/rows); var pos = 0; //数组中的位置 var par_x, par_y; //粒子的x,y坐标 var data = image.imageData.data; //像素值数组 for(var i = 0; i < cols; i++) { for(var j = 0; j < rows; j++) { //计算(i,j)在数组中的R的坐标值 pos = (j*s_height*image.w + i*s_width)*4; //判断像素透明度值是否符合要求 if(data[pos+3] > 100){ var particle = { //x,y值都随机一下 x: image.x + i*s_width + (Math.random() - 0.5)*20, y: image.y + j*s_height + (Math.random() - 0.5)*20 } // 根据图像不同的色值来设定粒子色值 if(data[pos+1] < 175 && data[pos+2] < 10) { particle.fillStyle = '#ffa900'; } else if(data[pos+1] < 75 && data[pos+1] > 50) { particle.fillStyle = '#ff4085'; } else if(data[pos+1] < 220 && data[pos+1] > 190) { particle.fillStyle = '#00cfff'; } else if(data[pos+1] < 195 && data[pos+1] > 175) { particle.fillStyle = '#9abc1c'; } //符合要求的粒子保存到数组里 particles.push(particle); } } } } //绘图案 function draw() { //清空画布 ctx.clearRect(0,0,canvas.w,canvas.h); var len = particles.length; var curr_particle = null; for(var i = 0; i < len; i++) { curr_particle = particles[i]; //设置填充颜色 ctx.fillStyle = curr_particle.fillStyle; //绘粒子到画布上 ctx.fillRect(curr_particle.x,curr_particle.y,1,1); } } })() </script>
转载:https://isux.tencent.com/canvas-particle-animation.html