canvas中一般动效与颗粒动效的完成编码示例

日期:2020-10-10 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

canvas用于在网页页面上绘图图象、动漫,能够将其了解为画布,在这个画布上搭建要想的实际效果。

canvas能够绘图动态性实际效果,除常见的标准动漫以外,还能够选用颗粒的定义来完成较繁杂的动效,本文各自选用一般动效与颗粒殊效完成了1个简易的数字时钟。

一般数字时钟

一般动效即运用canvas的api,完成有标准的图案设计、动漫。

实际效果

该实际效果完成较为简易,关键剖析1下刻度与指针角度偏位的完成。

绘图刻度

此例为小時刻度的绘图:表盘上共有12个小时,Math.PI为180°,每小时占有30°。
.save()表明储存canvas当今自然环境的情况,在此基本勤奋行绘图。绘图进行以后,回到以前储存过的相对路径情况和特性。

分钟刻度同理,更改角度与款式便可。

  // 小时刻间刻度
  offscreenCanvasCtx.save();
  for (var i = 0; i < 12; i++) {
    offscreenCanvasCtx.beginPath();
    // 刻度色调
    offscreenCanvasCtx.strokeStyle = '#fff';
    // 刻度宽度
    offscreenCanvasCtx.lineWidth = 3;
    // 每小时占有30°
    offscreenCanvasCtx.rotate(Math.PI / 6);
    // 刚开始绘图的部位
    offscreenCanvasCtx.lineTo(140, 0)
    // 完毕绘图的部位;
    offscreenCanvasCtx.lineTo(120, 0);
    // 绘图相对路径
    offscreenCanvasCtx.stroke();
  }
  offscreenCanvasCtx.restore();

指针指向

以秒针为例:获得当今時间的秒数,并测算对应的偏位角度

  var now = new Date(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hr = now.getHours();
  hr = hr > 12 ? hr - 12 : hr;
  
  //秒针
  offscreenCanvasCtx.save();
  offscreenCanvasCtx.rotate(sec * (Math.PI / 30));
  ......
  offscreenCanvasCtx.stroke();

颗粒动效

canvas能够用来绘图繁杂,不规律的动漫。颗粒殊效能够用来完成繁杂、任意的动态性实际效果。

颗粒,指图象数据信息imageData中的每个像素点,获得到每一个像素点以后,加上特性或恶性事件对地区内的颗粒开展互动,做到动态性实际效果。

实际效果

颗粒获得

下列图的照片转换为例,该实际效果是先在canvas上3D渲染照片,随后获得文本所属地区的每一个像素点。

let image = new Image();
  image.src='../image/logo.png';
  let pixels=[]; //储存像素数据信息
  let imageData;
  image.width = 300;
  image.height = 300
  // 3D渲染照片,并获得该地区内像素信息内容
  image.onload=function(){
    ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height);
    imageData=ctx.getImageData((canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); //获得图表像素信息内容
 //绘图图象
  };

像素信息内容

照片的尺寸为300*300,共有90000个像素,每一个像素占4位,储放rgba数据信息。

颗粒绘图

 function getPixels(){
    var pos=0;
    var data=imageData.data; //RGBA的1维数字能量数组数据信息
    //源图象的高宽比和宽度为300px
    for(var i=1;i<=image.width;i++){
      for(var j=1;j<=image.height;j++){
        pos=[(i⑴)*image.width+(j⑴)]*4; //获得像素部位
        if(data[pos]>=0){
          var pixel={
            x:(canvas.width-image.width)/2+j+Math.random()*20, //再次设定每一个像素的部位信息内容
            y:(canvas.height-image.height)/2+i+Math.random()*20, //再次设定每一个像素的部位信息内容
            fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'
          }
          pixels.push(pixel);
        }
      }
    }
  }
  function drawPixels() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    var len = pixels.length, curr_pixel = null;
    for (var i = 0; i < len; i++) {
      curr_pixel = pixels[i];
      ctx.fillStyle = curr_pixel.fillStyle;
      ctx.fillRect(curr_pixel.x, curr_pixel.y, 1, 1);
    }
  }

颗粒数字时钟

3D渲染文本数字时钟

 function time() {
    ctx.clearRect(0,0,canvas.width,canvas.height)
    ctx.font = "150px 黑体";
    ctx.textBaseline='top';
    ctx.fillStyle = "rgba(245,245,245,0.2)";
    ctx.fillText(new Date().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight);
  }

实际效果

获得颗粒

文本变换颗粒定义同上,获得选定地区的像素,依据挑选标准开展挑选并存入数字能量数组。历经遍历后再次绘图。

  function getPixels(){
    let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight);
    let data = imgData.data
    pixelsArr = []
    for(let i=1;i<=textHeight;i++){
      for(let j=1;j<=textWidth;j++){
        pos=[(i⑴)*textWidth+(j⑴)]*4; //获得像素部位
        if(data[pos]>=0){
          var pixel={
            x:j+Math.random()*20, //再次设定每一个像素的部位信息内容
            y:i+Math.random()*20, //再次设定每一个像素的部位信息内容
            fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'
          };
          pixelsArr.push(pixel);
        }
      }
    }
  }

imgData储存了所选地区内的像素信息内容,每一个像素点占有4位,储存了RGBA4位信息内容。挑选每一个像素的第4位,这段编码中将全部全透明度不为0的像素都储存到了数字能量数组pixelsArr中。

xy记述了该颗粒的部位信息内容,以便造成实际效果图中的健身运动实际效果,给每一个颗粒加上了0⑵0个像素的偏位部位,每次重绘时,偏位部位任意转化成,造成健身运动实际效果。

颗粒重绘

获得颗粒以后,必须消除画布中华有的文本,将获得到的颗粒再次绘图到画布上去。

  function drawPixels() {
    // 消除画布內容,开展重绘
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for (let i in pixelsArr) {
      ctx.fillStyle = pixelsArr[i].fillStyle;
      let r = Math.random()*4
      ctx.fillRect(pixelsArr[i].x, pixelsArr[i].y, r, r);
    }
  }

颗粒重绘时的款式为挑选像素时本来的色调与全透明度,而且每一个在画布上绘图每一个颗粒时,界定尺寸主要参数r,r赋值为0⑷中任意的数据。最后转化成的颗粒尺寸任意。

即时更新

获得颗粒并取得成功重绘以后,必须网页页面即时更新時间。这里选用window.requestAnimationFrame(callback)方式。

  function time() {
    ......
    getpixels(); //获得颗粒
    drawPixels(); // 重绘颗粒
    requestAnimationFrame(time);
  }

window.requestAnimationFrame(callback) 方式告知访问器您期待实行动漫并恳求访问器在下1次重绘以前启用特定的涵数来升级动漫。该方式应用1个回调函数涵数做为主要参数,这个回调函数涵数会在访问赏识绘以前启用。

该方式不必须设定時间间距,启用频率选用系统软件時间间距(1s)。

文本文档解释戳这里

实际效果

总结

本文关键根据两种不一样的方法完成了数字时钟的动态性实际效果,在其中颗粒数字时钟具备更多的可实际操作性。在之后的canvas系列中会对于颗粒系统软件完成更多的动态性实际效果。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。