这是我的身体看起来像:制作帆布透明
body
{
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:fixed 100vw;
background-position:center;
}
的问题是,画布是白色的而不是透明的。有没有办法让它透明,这样我就可以把DNA背景放在背景之上?
这是我的身体看起来像:制作帆布透明
body
{
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:fixed 100vw;
background-position:center;
}
的问题是,画布是白色的而不是透明的。有没有办法让它透明,这样我就可以把DNA背景放在背景之上?
一个简单的方法,是使用一个屏幕外的画布。
首先将其上下文的globalAlpha
值设置为0到1之间的某个值,这将确定您的先前绘图将以多快的速度消失。
然后,在动画循环,做新的图纸之前,
在此过程中,您的图像将失去不透明度。
var clear = function(){
// clear the clone canvas
cloneCtx.clearRect(0,0,canvasWidth, canvasHeight)
// this should be needed at init and when canvas is resized but for demo I leave it here
cloneCtx.globalAlpha = '.8';
// draw ou visible canvas, a bit less opaque
cloneCtx.drawImage(context.canvas, 0,0)
// clear the visible canvas
context.clearRect(0,0,canvasWidth, canvasHeight)
// draw back our saved less-opaque image
context.drawImage(clone, 0,0)
}
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
// create an offscreen clone
clone = canvas.cloneNode(),
cloneCtx = clone.getContext('2d'),
canvasWidth = canvas.width =
clone.width =window.innerWidth,
canvasHeight = canvas.height = clone.height = window.innerHeight,
globalTick = 0,
points = [],
pointCount = 12,
pointSpeed = 6,
spacing = canvasWidth/pointCount,
pointCount = pointCount + 2,
verticalPointRange = 60,
randomRange = function(min, max){
return Math.floor((Math.random() * (max - min + 1)) + min);
},
iPath,
iPoints;
var Point = function(x, y, alt){
this.x = x;
this.y = y;
this.yStart = y;
this.alt = alt;
}
Point.prototype.update = function(i){
var range = (this.alt) ? verticalPointRange : -verticalPointRange;
this.x += pointSpeed;
this.y = (this.yStart) + Math.sin(globalTick/14) * -range;
if(this.x > (canvasWidth + spacing)){
this.x = -spacing;
var moved = points.splice(i, 1);
points.unshift(moved[0]);
}
}
var updatePoints = function(){
var i = points.length;
while(i--){
points[i].update(i);
}
}
for(iPoints = 0; iPoints < pointCount; iPoints++){
var alt = (iPoints % 2 === 0);
var offset = (alt) ? verticalPointRange : -verticalPointRange;
points.push(new Point(spacing * (iPoints-1), canvasHeight/2, alt));
}
var renderPath = function(){
context.beginPath();
context.moveTo(points[0].x, points[0].y);
for(iPath = 1; iPath < pointCount; iPath++){
context.lineTo(points[iPath].x, points[iPath].y);
}
context.stroke();
}
var loop = function(){
requestAnimationFrame(loop, canvas);
clear();
updatePoints();
renderPath();
globalTick++;
};
loop();
canvas { display: block; }
body{
background-color: ivory;
}
<canvas id="canvas"></canvas>
画布在默认情况下是透明的。
尝试设置页面背景图像,然后在其上放置画布。如果画布上没有绘制任何内容,则可以完全看到页面背景。
你应该尝试
context.clearRect(0,0,width,height);
变化'context.fillStyle = 'HSLA(0,0%,100%,0.15)';''进context.fillStyle =“HSLA(0,0%,100 %,0)';' – Roberrrt
看看这个:http://stackoverflow.com/questions/14012768/html5-canvas-background-image – Cecilia
@Roberrrt这复制海浪上的波浪 – kjanko