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中。
x、y记述了该颗粒的部位信息内容，以便造成实际效果图中的健身运动实际效果，给每一个颗粒加上了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系列中会对于颗粒系统软件完成更多的动态性实际效果。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 小程序怎么做_凡科网小程序_微信小程序界面_线上报名小程序_微信小程序页面制作 版权所有 （网站地图） 粤ICP备10235580号