- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的目的是在圆形形状内绘制半圆形内阴影,代表围绕恒星运行的行星(这是我正在开展的教育计划的一部分)。
经过多种方法之后,这就是几乎对我有用的方法:
2. 使用组合选项“ctx.globalCompositeOperation='source-atop';”要绘制更大的圆圈,它只会绘制与现有内容重叠的部分:
但问题是任何行星都会与任何阴影圈重叠,因此,如您所见,当行星与较大的阴影重叠时,它会变得完全黑暗。
有没有办法让它绘制特定内容(形状)的重叠区域?
或者,您知道更好的方法吗?请记住,我必须以从行星到光源的特定 Angular 绘制阴影。
提前致谢!
最佳答案
太阳系阴影的酷解决方案。
某些设备不喜欢渲染阴影,渲染期间的所有 mask 操作都会占用您可能添加的任何其他 FX。
制作阴影的一种方法是在开始时为每个行星渲染阴影。遮盖它,使其完美适合地球。在动画过程中,只需绘制行星,然后旋转阴影图像以面向太阳并调用drawImage即可获得与您相同的效果,而且速度要快很多倍。
函数createShadow
为行星创建自定义阴影图像,并将其作为planet.shadow
添加到行星对象中。函数drawPlanet
首先绘制行星,然后使用正常的source-over
合成在其上绘制阴影。
var canvas = document.createElement("canvas");
canvas.width = canvas.height = 1024;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
const shadowImageSafeEdge = 2; // pixel safe border around shadow image
const shadowBlur = 0.8; // fraction of planet radius
var sun = {
x : canvas.width /2,
y : canvas.height / 2,
radius : 80,
color : "yellow",
}
var sunGrad = ctx.createRadialGradient(0, 0, sun.radius/4, 0, 0, sun.radius);
sunGrad.addColorStop(0,"#FF7");
sunGrad.addColorStop(0.6,"#FF4");
sunGrad.addColorStop(0.8,"#FF0");
sunGrad.addColorStop(1,"#DC0");
sun.color = sunGrad;
function rInt(min,max){
return Math.floor((max-min) * Math.random() + min);
}
function randCol(hue){
var col = "hsl(";
col += Math.floor(hue + rInt(-30,30) + 360) % 360;
col += ",";
col += Math.floor(80 + rInt(-20,20) + 100) % 100;
col += "%,";
col += Math.floor(50 + rInt(-10,10) + 100) % 100;
col += "%)";
return col;
}
// creates a planet at orbit distance from sun
function createPlanet(orbit){
var planet = {
radius : Math.random() * 20 + 5,
orbitDist : orbit, // dist from sun
orbitPos : Math.random() * Math.PI * 2,
shadow : null,
}
planet.color = randCol(rInt(280, 360));
planet.shadow = createShadow(planet);
return planet;
}
// creates a shadow image that fits the planet
function createShadow(planet){
var r = planet.radius;
var s = shadowImageSafeEdge;
var planetShadow = document.createElement("canvas");
planetShadow.width = planetShadow.height = r * s + s * 2; // a little room to stop hard edge if zooming
var ctx = planetShadow.ctx = planetShadow.getContext("2d");
ctx.shadowBlur = r * shadowBlur ;
ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
ctx.lineWidth = r * 2 - r * (1 - shadowBlur / 2);
ctx.strokeStyle = ctx.shadowColor = "rgba(0,0,0,1)";
ctx.beginPath();
ctx.arc(-planet.orbitDist - r,r + s, planet.orbitDist + r * 2 + r * (shadowBlur /0.85) + s, 0, Math.PI * 2);
ctx.stroke();
ctx.stroke();
ctx.stroke();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.globalCompositeOperation = "destination-in";
ctx.beginPath();
ctx.arc(r + s, r + s, r, 0, Math.PI * 2); // sun will be along x axis
ctx.fill();
ctx.globalCompositeOperation = "source-over";
return planetShadow;
}
// draws the planet and the shadow
function drawPlanet(planet){
var xdx = Math.cos(planet.orbitPos);
var xdy = Math.sin(planet.orbitPos);
var x = xdx * planet.orbitDist + sun.x;
var y = xdy * planet.orbitDist + sun.y;
ctx.setTransform(1,0,0,1,x,y);
ctx.fillStyle = planet.color;
ctx.beginPath();
ctx.arc(0,0,planet.radius,0,Math.PI * 2);
ctx.fill();
// set transform so that shadow faces away from the sun
ctx.globalAlpha = 0.8;
ctx.setTransform(xdx,xdy,-xdy,xdx,x,y);
ctx.drawImage(planet.shadow,-planet.radius - 2,-planet.radius - 2);
ctx.globalAlpha =1;
}
// let you guess what this function does
function drawSun(){
ctx.fillStyle = sun.color;
ctx.setTransform(1,0,0,1,sun.x,sun.y);
ctx.beginPath();
ctx.arc(0,0,sun.radius,0,Math.PI * 2);
ctx.fill();
}
// array of planets and create them
var planets = [];
(function(){
var i = 10;
while(i-- >1){
planets.push(
createPlanet(
rInt( 60 + i * 40,i * 40 + 100)
)
);
}
}());
// gradient for background
var backGrad = ctx.createRadialGradient(512, 512, sun.radius, 512, 512, Math.sqrt(512 * 512 * 2));
backGrad.addColorStop(0,"#B9E");
backGrad.addColorStop(0.025,"#96A");
backGrad.addColorStop(1,"#624");
// main render loop
function render(time){
ctx.setTransform(1,0,0,1,0,0); // reset transform
ctx.fillStyle = backGrad;
ctx.fillRect(0,0,1024,1024); // clear
drawSun();
for(var i = 0; i < planets.length; i++){ // draw all planets
planets[i].orbitPos += Math.sqrt(10 / Math.pow(planets[i].orbitDist, 2));
drawPlanet(planets[i]);
}
requestAnimationFrame(render);
}
requestAnimationFrame(render);
关于javascript - HTML Canvas : inner shadow for circle shapes (planets),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42656536/
您好,我很确定我的问题很愚蠢,但我无法弄清楚它对我的生活有何影响。我有这个家庭作业,它基本上是为了加强我们在类里面学到的关于多态性的知识(顺便说一下,这是 C++)。该程序的基础是一个名为 shape
我是新手,所以需要任何帮助,当我要求一个例子时,我的教授给我了这段代码,我希望有一个工作模型...... from numpy import loadtxt import numpy as np fr
CSS 形状边距 和 外型不适用于我的系统。我正在使用最新版本的 Chrome。我唯一能想到的是我的操作系统是 Windows 7。这应该是一个问题吗? 这是JSFiddle .但是,由于在您的系统上
#tf.shape(tensor)和tensor.shape()的区别 ?
我要求提示以下问题。如何从事件表添加到指定的单元格形状?当我知道名称但不知道如何为...中的每个形状实现论坛时,我可以添加形状 目前我有这样的事情: Sub loop() Dim a As Integ
我在 Excel 中有一个流程设计(使用形状、连接器等)。 我需要的是有一个矩阵,每个形状都有所有的前辈和所有的后继者。 在 VBA 中,为此我正在尝试执行以下操作: - 我列出了所有的连接器(Sha
我正在使用 JavaFX 编写一个教育应用程序,用户可以在其中绘制和操作贝塞尔曲线 Line、QuadCurve 和 CubicCurve。这些曲线应该能够用鼠标拖动。我有两种选择: 1- 使用类 L
我正在尝试绘制 pandas 系列中列的直方图 ('df_plot')。因为我希望 y 轴是百分比(而不是计数),所以我使用权重选项来实现这一点。正如您在下面的堆栈跟踪中发现的那样,权重数组和数据系列
我尝试在 opencv dnn 中实现一个 tensorflow 模型。这是我遇到的错误: OpenCV: Can't create layer "flatten_1/Shape" of type "
我目前正在用 Java 开发一款游戏,我一直在尝试弄清楚如何在 Canvas 上绘制一个形状(例如圆形),在不同的形状(例如正方形)之上,但是只绘制与正方形相交的圆的部分,类似于 Photoshop
import cv2 import numpy as np import sys import time import os cap = cv2.VideoCa
我已经成功创建了 Keras 序列模型并对其进行了一段时间的训练。现在我试图做出一些预测,但即使使用与训练阶段相同的数据,它也会失败。 我收到此错误:{ValueError}检查输入时出错:预期 em
我正在尝试逐行分解程序。 Y 是一个数据矩阵,但我找不到任何关于 .shape[0] 究竟做了什么的具体数据。 for i in range(Y.shape[0]): if Y[i] == -
我正在尝试运行代码,但它给了我这个错误: 行,列,_ = frame.shape AttributeError:“tuple”对象没有属性“shape” 我正在使用OpenCV和python 3.6,
我想在 JavaFx 中的 Pane 上显示形状。我正在使用从空间数据库中选择的 Oracle JGeometry 对象,它有一个方法 createShape() 但它返回 java.awt.Shap
在此代码中: import pandas as pd myj='{"columns":["tablename","alias_tablename","real_tablename","
我正在尝试将 API 结果应用于两列。 下面是我的虚拟数据框。不幸的是,这不是很容易重现,因为我使用的是带有 key 和密码的 API...这只是为了让您了解尺寸。 但我希望也许有人能发现一个明显的问
我的代码是: final String json = getObjectMapper().writeValueAsString(JsonView.with(graph) .onClas
a=np.arange(240).reshape(3,4,20) b=np.arange(12).reshape(3,4) c=np.zeros((3,4),dtype=int) x=np.arang
我正在尝试从张量中提取某些数据,但出现了奇怪的错误。在这里,我将尝试生成错误: a=np.random.randn(5, 10, 5, 5) a[:, [1, 6], np.triu_indices(
我是一名优秀的程序员,十分优秀!