我正在畫一個畫布。
我簡化了我的代碼。
有一個透明的圓圈。
背景是 rgba 0,0,0,0.5。
我想為透明圓圈添加“shadowblur”。然而，它失敗了。
可能嗎？
我有另一個邏輯：
- 創建一個帶有線性漸變的圓（rgba 0,0,0,0.5，透明）
不過，好像也不好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="Preloader">
<canvas id="myCanvas"></canvas>
</div>
<style>
.Preloader {
background-color: #7bf;
}
</style>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;
class ball {
constructor(x, y) {
this.position = {
x: x,
y: y
}
this.r = 100
}
draw() {
ctx.beginPath();
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, c.width, c.height);
ctx.fill();
ctx.closePath();
ctx.save();
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.r, 0, 2 * Math.PI, false);
ctx.clip();
ctx.clearRect(0, 0, c.width, c.height);
ctx.shadowBlur = 0;
ctx.closePath();
ctx.restore();
}
update() {
this.draw()
this.position.x
this.position.y
}
}
var Ball = new ball(c.width / 2, c.height / 2)
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, c.width, c.height);
Ball.update();
};
animate();
</script>
</body>
</html>uj5u.com熱心網友回復：
如果您的意思是希望剪輯區域的邊緣更平滑，那么您可以使用合成將任何位圖用作蒙版：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;
class ball {
constructor(x, y) {
this.position = {
x: x,
y: y
}
this.r = 100
}
draw() {
// fillRect doesn't need beginPath(), and it does fill()
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, c.width, c.height);
// closePath encloses the current subpath
// it doesn't "end" the path declaration
// beginPath does that
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.r, 0, 2 * Math.PI, false);
// we use compositing to create our hole, with shadow:
ctx.globalCompositeOperation = "destination-out";
ctx.shadowBlur = 30;
ctx.shadowColor = "black";
ctx.fillStyle = 'black';
ctx.fill();
// restore
ctx.shadowBlur = 0;
ctx.globalCompositeOperation = "source-over";
}
update() {
this.draw()
this.position.x
this.position.y
}
}
var Ball = new ball(c.width / 2, c.height / 2)
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, c.width, c.height);
Ball.update();
};
animate();.Preloader {
background-color: #7bf;
}<div class="Preloader">
<canvas id="myCanvas"></canvas>
</div>這也適用于 CanvasGradient 而不是 shadowBlur：
顯示代碼片段
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;
class ball {
constructor(x, y) {
this.position = {
x: x,
y: y
}
this.r = 100
}
draw() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, c.width, c.height);
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = ctx.createRadialGradient(this.position.x, this.position.y, this.r, this.position.x, this.position.y, 0);
ctx.fillStyle.addColorStop(0, "transparent");
ctx.fillStyle.addColorStop(.25, "black");
ctx.fillRect(0, 0, c.width, c.height);
// restore
ctx.globalCompositeOperation = "source-over";
}
update() {
this.draw()
this.position.x
this.position.y
}
}
var Ball = new ball(c.width / 2, c.height / 2)
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, c.width, c.height);
Ball.update();
};
animate();.Preloader {
background-color: #7bf;
}<div class="Preloader">
<canvas id="myCanvas"></canvas>
</div>甚至在 Chrome 和 Firefox 中使用 CSS 模糊過濾器：
顯示代碼片段
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;
class ball {
constructor(x, y) {
this.position = {
x: x,
y: y
}
this.r = 100
}
draw() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.r, 0, 2 * Math.PI, false);
// we use compositing to create our hole, with shadow:
ctx.globalCompositeOperation = "destination-out";
ctx.filter = "blur(15px)";
ctx.fill();
// restore
ctx.filter = "none";
ctx.globalCompositeOperation = "source-over";
}
update() {
this.draw()
this.position.x
this.position.y
}
}
var Ball = new ball(c.width / 2, c.height / 2)
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, c.width, c.height);
Ball.update();
};
animate();.Preloader {
background-color: #7bf;
}<div class="Preloader">
<canvas id="myCanvas"></canvas>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/493203.html
標籤：javascript html 帆布