Canvas繪制可愛(ài)的鬼魂幽靈動(dòng)畫特效——源碼分享
“前沿技術(shù)是指高技術(shù)領(lǐng)域中具有前瞻性、先導(dǎo)性和探索性的重大技術(shù)，是未來(lái)高技術(shù)更新?lián)Q代和新興產(chǎn)業(yè)發(fā)展的重要基礎(chǔ)，是國(guó)家高技術(shù)創(chuàng)新能力的綜合體現(xiàn)。”
01
—
效果實(shí)現(xiàn)
以視頻效果展示（全程靜音）：
具體指引詳見(jiàn)《計(jì)算機(jī)基礎(chǔ)與編程》
02
—
今日知識(shí)分享
世界知識(shí)產(chǎn)權(quán)組織2015年11月11日發(fā)布《2015年世界知識(shí)產(chǎn)權(quán)報(bào)告:突破式創(chuàng)新與經(jīng)濟(jì)增長(zhǎng)》，分析了3D打印、納米技術(shù)和機(jī)器人工程學(xué)等擁有促進(jìn)未來(lái)經(jīng)濟(jì)增長(zhǎng)潛力的新技術(shù)，并指出中國(guó)是在這3項(xiàng)最尖端前沿技術(shù)創(chuàng)新方面惟一向先進(jìn)工業(yè)化國(guó)家靠近的新興市場(chǎng)國(guó)家。（1）GIS與“數(shù)字地球”（2）虛擬現(xiàn)實(shí)（3）智能化與個(gè)性化的WEB信息檢索技術(shù)（4）智能信息處理技術(shù)（5）網(wǎng)格技術(shù)與云計(jì)算
……
具體指引詳見(jiàn)《https://baike.so.com/doc/443124-469228.html》
02
—
源碼分享
Html:
<html><head><meta charset="utf-8"><title>Canvas鬼魂</title><style>canvas {position: fixed;top: 0;left: 0;}</style></head><body><script type="text/javascript" src='js/p5.min.js'></script><div></div><script type="text/javascript">var blobs = [];function setup() {var iHeight = window.innerHeight;if (iHeight < 500) {iHeight = 500;}createCanvas(window.innerWidth, iHeight);drawingContext.shadowOffsetX = 0;drawingContext.shadowOffsetY = 0;drawingContext.shadowBlur = 60;drawingContext.shadowColor = "rgb(255, 176, 190)";for (var i = 0; i < 13; i++) {blobs.push(new Blob(random(width), random(height)));}}function draw() {background(13, 33);for (var b = 0; b < blobs.length; b++) {blobs[b].update();blobs[b].show();}}function Blob(x, y) {this.pos = createVector(x, y);this.vel = p5.Vector.random2D();this.vel.mult(random(1, 3));this.r = random(42, 72);this.yoff = random(1000);this.update = function() {this.pos.add(this.vel);if (this.pos.x > width || this.pos.x < 0) {this.vel.x *= -1;}if (this.pos.y > height || this.pos.y < 0) {this.vel.y *= -1;}}this.show = function() {noStroke();fill(255);push();translate(this.pos.x, this.pos.y);beginShape();var xoff = 0;for (var a = 0; a < TWO_PI; a += 0.1) {var offset;if (a > PI/6 && a < 5 * PI/6) {offset = map(noise(xoff, this.yoff), 0, 1, -0.31 * this.r, 0.78 * this.r);} else {offset = map(noise(xoff, this.yoff), 0, 1, -0.08 * this.r, 0.08 * this.r);}var r = this.r + offset;var x = r * cos(a);var y = r * sin(a);vertex(x, y);xoff += 0.1;}endShape(CLOSE);this.yoff += 0.08;pop();var eyeOffset = 0.23 * this.r;stroke(54);fill(54);ellipse(this.pos.x - eyeOffset, this.pos.y - eyeOffset, 0.16 * this.r, 0.23 * this.r);ellipse(this.pos.x + eyeOffset, this.pos.y - eyeOffset, 0.16 * this.r, 0.23 * this.r);strokeWeight(4);line(this.pos.x - eyeOffset * 2, this.pos.y - eyeOffset * 2, this.pos.x, this.pos.y - eyeOffset);line(this.pos.x + eyeOffset * 2, this.pos.y - eyeOffset * 2, this.pos.x, this.pos.y - eyeOffset);fill(255);noStroke();ellipse(this.pos.x - eyeOffset, this.pos.y - eyeOffset - 3, 0.08 * this.r, 0.125 * this.r);ellipse(this.pos.x + eyeOffset, this.pos.y - eyeOffset - 3, 0.08 * this.r, 0.125 * this.r);fill(54);arc(this.pos.x, this.pos.y, 0.5 * this.r, 0.5 * this.r, 0, PI);}}</script></body></html>
JavaScript，比較凌亂，暫不貼出
寫在最后
評(píng)論
圖片
表情