标签: Canvas
clickaddeventlistener
我一直在尝试让我的简单javascript脚本将弹跳球移动到发生鼠标点击事件的位置。我这里有剧本。它将与id为游戏的任何大小的画布交互。球反弹,但它忽略了鼠标点击。你知道怎么了吗?谢谢
var canvas;
var x, y;
var dx=4;
var dy=4;
var d = 20;
var width, height;
function init() {
canvasE = document.getElementById('game');
canvas= canvas
我正在用webgl之类的工具建立一个小的starfield程序
目前,我的明星都是普通点。从很远的地方看,它看起来很不错,但一旦你放大它,它就会变得很无聊
我如何添加一些东西使它看起来更像明星?像闪光和微光之类的。你要寻找的是所谓的粒子效应
有一些可能接近您想要的东西。它是一个渲染的gif(旋转),可以选择在其上渲染另一个相同的gif(非旋转),以提供“闪烁”效果。请注意,它只有50颗星,因此在星场中可能表现很差
您可以查看所有课程。还可以查找完美的bloom Effects。我一次只需要一颗星
是否有可能以任何方式改变线宽,如基于画布的绘图应用程序的图像中的线宽?由于线宽没有类似渐变的值(不同的起点-不同的终点),我正在寻找尽可能接近下图的最佳方法
HTML5API不提供如此复杂的功能
您最好的选择是使用您需要的任何算法编写您自己的线像素渲染器。但是,呈现程序可能有点慢,因为逻辑必须在纯Javascript中实现
在这种情况下,问题变得更一般,“如何在位图上绘制不同宽度的贝塞尔曲线”,Javascript只是该算法的一个实现
例如:
我还建议您研究像Inkscape这样的开源绘图应用
所以我对Html/Javascript还不熟悉。所以我决定玩画布和显示瓷砖,并获得鼠标点击。我试图做的是让鼠标点击,然后将用户点击的瓷砖变成不同的颜色。问题是我如何得到用户单击以转换为平铺坐标的位置。似乎我走的越远,它的准确度也越低
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
我试图创建eventlisteners绘图到stage.mouseYstage.MouseX坐标,但无论我在何处单击,中间的直线都是完全相同的
这是我的密码
Ext.onReady( function(){
var g;
canvas = document.getElementById('Canvas');
var stage = new createjs.Stage(canvas);
function draw(a){
var mousex = stage.mous
在Easel.js中,您可以画一条如下所示的线:
lineE.graphics
.moveTo(x1,y1)
.setStrokeStyle(3)
.beginStroke("black")
.lineTo(x2,y2);
但要改变它的坐标,我必须删除所有内容:
lineE.graphics
.clear() <-----------Why??????
.moveTo(newX1,newY1)
.setStrokeStyle(3)
我试图让facebook apprequest在画布上工作,但我遇到了这个错误
MissingMethodException: Method not found: 'UnityEngine.Screen.get_showCursor'.
at Facebook.AsyncRequestFriendSelectorGet.ShowDialog (.FBResult result) [0x00000] in <filename unknown>:0
at Facebook.As
我正在用jqueryflot图表开发一个图表。
问题很奇怪。当我缩放窗格时,图表的行为会发生变化
看看这些样品。
我发现了这个问题。
我试图用JSFIDLE实现它,我发现问题出在样条线插件上。我从系列中删除了它,并解决了它。请提供您的代码、数据、选项和使用过的插件(可能作为一个例子,有关更多信息,请参阅)。
我正在尝试将一张paperjs画布放入另一张画布。我正在使用importJSON将画布导入当前paperjs画布对象。但是,两张画布的大小不同,因此,并非所有内容都可见。我试图设置paperjs项目的视图,但没有成功。这就是我所尝试的:
canvasObj.project.importJSON(tabData.dataUrl);
canvasObj.project.view.viewSize = new paper.Size(window.innerWidth - this.canvasWidt
如何在HTML5画布中打开高分辨率图像
无法打开分辨率超过20000*20000的图像
我想在不影响质量的情况下开放你说的开放是什么意思?
标签: Canvas
cpu-usagehtml5-animation
我正在尝试制作一张人造像素化的世界地图,这样它可以在不同的颜色之间平滑过渡。我最初是用jquery和表来实现的,但是cpu使用率非常高,所以我想我应该试试html5画布。然而,我仍然得到非常高的cpu使用率。我想知道它是否是代码中的大数组(我用它来指示应该在哪里填充一个正方形)。任何帮助都将不胜感激
<!DOCTYPE html>
<html>
<head>
<title>canvas version</title>
&
当使用gnuplot绘制数据时,我感觉右边框被切断,因此最后一个x值不完全可见。
如何将画布设置为更大
第二个答案
要放大绘图页边距,请参见。比如:
set rmargin 5
我们应该做到这一点
第一个答案
您可以显式地设置如下所示:
或者,可以在命令中指定范围:
如果你想动态地改变x和y范围,也许会有所帮助。我对一个小小的Gnuplot窗口非常恼火,它只利用了我屏幕上一块简陋的瓷砖,而xrange/yrange只是将更多/更少的数据放在同一个小小的窗口中,我就想到了一个问题:“如何增加画布
我是Aptana新手,当我创建新的java脚本文件并引用画布标记id时,我似乎没有自动完成html5画布相关的功能
例如,在java脚本文件中:
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
当我写上下文时。Aptana没有显示html5画布相关函数的自动完成建议,例如fillStyle
如何显示html5功能的自动完成建议?或者Aptana还不支持
我正在尝试扩展/子类ShapeDrawable。结果真是令人费解。我的简单代码应该创建一个小点和一个小三角形。事实上,这些形状确实出现在地图视图上,在那里绘制它们。然而,第二个三角形的形状也有所不同,我不知道这是为什么。为什么我的ShapeDrawable子类会创建一个额外的三角形
示例屏幕截图--->>
我想这个问题可能太难了。也许在这个子类之外的某个地方出了问题。(但奇怪的是,通过删除这里的绘图逻辑,重影三角形消失了,这确实发生了。)无论如何,我已经获得了一个更好的经验,制作了一个叠加,添加
我在svg文件中有一个图像,我使用canvg()将其导入到对象中
每当用户在svg文件中定义的路径中单击时,我需要执行一个操作。可能吗
Canvas是不需要的,如果不需要它就可以完成,请让我知道(有类似的东西吗?是的,你可以用Kinetic.js试试。请看一下这本书
canvg('canvas', '../path/to/your.svg')
我知道在我必须添加形状的地方绘制了一个空白区域
在我的项目中,用户需要绘制矩阵,而不是空白。如何做到这一点?以下是如何在html画布上绘制网格线:
演示:
函数drawGrid(行计数){
var xSpan=cw/行数;
var ySpan=连续波/行数;
ctx.clearRect(0,0,cw,ch);
ctx.save();
if(lineCount/2==parseInt(lineCount/2)){
ctx.translate(.5,5);
}
ctx.beginPath();
对
我试图根据我的运动事件的运动方向旋转位图图像,假设我有一个从顶视图看到的汽车图像,我希望汽车朝向我的运动方向,如果我向左移动,它应该旋转180度,向上旋转90度等等,请原谅我的英语不好,iv仅根据0为中心旋转图像
//this is how i rotate
double ComputeAngle(float x, float y){
final double RADS_TO_DEGREES = 360 / (Math.PI * 2);
double result =
我是画布新手,你能回答我的问题吗
我使用两个画布层,顶层画布(蓝色矩形)和底层画布(灰色球)。灰球随机移动,蓝矩形静止在某个位置
我需要实现
当灰球位于blueRectangle后面时,用户单击灰球,我需要
停止灰球运动
在这里查找代码
<section>
<div id="kanvas" style="position:relative; width:400px; height:300px">
<canvas id="layer1"
加载stickman.tojson后,圆和线旋转逻辑消失
我能够复制stickman逻辑,将线添加到对象中,当我移动对象时,线将旋转并跟随对象。我使用canvas.toJSON保存Json,所有这些都很好。我可以用canvas.loadFromJSON(Json)加载Json,它可以很好地加载
问题是加载后,当我移动圆时,线不会跟随并旋转。我尝试搜索要包含在toJSON()中的属性,但找不到任何内容
这是一个JSFIDLE示例
var canvas = this.__canvas =
我正在使用Intellij IDEA进行javafx FXML开发。我使用以下代码简单地绘制了一个矩形。然而,它从未出现过
Main.java
public class Main extends Application {
@Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("s
我是否错过了一个窍门——有没有办法在画布标签上获得外观更好的文本?例如:
文本抗锯齿在我看来不是很好。我正在考虑(再次-我来回)使用画布上方的DOM文本,但这并不适合所有情况(例如使用toDataURL()对画布进行PNG将导致没有文本,但它适合很多情况)是的,画布文本不如SVG或本机DOM元素中的文本好。如果您需要.png,则没有真正的解决方法。有一个理论解决方案,在屏幕外缓冲区(canvas)上以双分辨率或更高分辨率渲染画布文本,然后将缓冲区下采样到正确的分辨率。我找不到一个完美的文本下取
当窗口调整大小但现有图形未失效/重新绘制时,下面的代码将触发doDrawing()(请参见图像链接)。我的理解是JavaFX在幕后处理这个问题。我错过了什么?谢谢
编辑:我发现,如果我在GraphicsContext上调用clearRect,指定整个画布,它将正确地重新绘制,但我认为JavaFX确定了需要重新绘制的内容
导入javafx.application.application;
导入javafx.beans.value.observeValue;
导入javafx.scene.scen
我是JavaFX新手,我正在尝试在画布上绘制一些东西
首先,我将linecolor设置为黑色并绘制一条线
canvas.getGraphicsContext2D().setStroke(Color.BLACK);
canvas.getGraphicsContext2D().strokeLine(20,20,100,100);
在此之后,我试图通过在这条线上画一条白线来擦除这条线:
canvas.getGraphicsContext2D().setStroke(Color.WHITE);
c
我正在处理Xamarin表单应用程序。我有一个要求,我需要手工绘制现有的图像,并保存它。你能告诉我怎么做吗
最好是任何示例程序
有关更多详细信息,请参阅此链接,我已上传了演示我的要求的视频
注意:我需要在现有图像上手工绘制。您可以使用Skisharp来完成此操作,并解释如何修改现有图像
您也可以使用SyncFusion
我正在研究这个代码
window.onload = init;
....
参考文献
在动画开始之前,当图像未加载时,它会显示黑色背景。
我试了很多,但没能改变它的颜色或删除它
关于如何将颜色更改为白色或透明,有什么帮助或建议吗?该小提琴中有两个图像加载程序。。。当每个图像完全加载时调用函数参数。。。你可以检查这些函数中的一个计数器,当它达到2时,然后调用一个例程来启动应用程序的其余部分
as in the following codepen:
为什么不使用THREE.LoadingMana
我有一个简单的GUI,它有三个框架。其中一个框架是包含画布的笔记本框架。问题是笔记本框架无法展开以适应窗口。我尝试了grid()和pack()的所有不同组合。对我来说似乎什么都不管用。所以我终于来了。我希望这里有人能告诉我我做错了什么。包括我的代码的精简版本:
from tkinter import *
import ttk
window = Tk()
window.geometry("640x480")
window.title("Notebook Test")
options_l
我从“raywenderlich”开始练习“SwiftUI:Getting Started”,这很好。Xcode和SwiftUI以及所有的东西都工作得很好
我从苹果官方网站开始第二次实习。(其实我觉得什么项目并不重要。)
在第二次练习中,我做了一些查看,每次运行预览时都会显示“快速用户界面:入门预览”。但正常预览(不运行)没有问题。我无法检查我的视图是否工作
这是XCode 11 beta 4(11M374r)或macOS(10.15 beta(19A512f))的错误还是我的设置问题
我应该等
标签: Canvas
mouseeventfabricjsmouseout
如何使画布对象(矩形)的选择始终处于活动状态,即使在mouse:down事件之后也是如此?我尝试过子目标检查:true属性;但该物业不符合上述要求
this.fabricObject = new fabric.Rect({
left: this.objectSize.left,
top: this.objectSize.top,
width: this.objectSize.width,
height: this.objectSize.height,
fill: '#ccc'
如果我将这样的图像四舍五入:
context.beginPath();
context.arc(25, 25, 25, 0, Math.PI * 2, true);
context.closePath();
context.clip();
context.drawImage("image_here", 0, 0, 50, 50);
如何在不剪裁的情况下将外部阴影添加到圆形图像中?使用画布中内置的阴影方法
let canvas=d
我正在使用processing.js用javascript开发一个画笔应用程序
它正在使用画布对象。我想在画布的背景上保留一个图像。在前景画一些东西。在保存时,我只需要获取前景数据
为此,我们需要使画布对象透明,以便背景图像可见
我看不到任何使画布透明的选项。我该怎么做
context.clearRect(0,0,width, height)
是你所需要的一切=)
请记住,您可以在画布对象上使用CSS样式
canvas.style.position = "absolute";
canva
我有一个VBox,其中包含多个网格作为其子对象。您必须滚动才能查看所有网格。网格中有按钮。如果按任意按钮,将从VBox中删除所有栅格并用该栅格的子栅格填充,从而显示该栅格的子栅格。有一个“上一步”按钮,用于删除子项并用以前的网格填充VBox。现在,当我按下“后退”按钮时,我想返回到我单击以查看其子项的特定网格。如果它在卷轴的底部,那么当我回来时,我会看到那个网格而不是顶部网格。但它总是显示顶部网格。我尝试了设置焦点的方法。但它不起作用
我有一个画布作为根父对象,一个Vbox作为它的子对象。Vbo
我想将一个40x40画布、一个文本框和另一个40x160画布按此顺序放在同一行上,但它似乎确实有效,这就是我想到的:
<span><canvas id="color" width="40" height="40"></canvas></span>
<span><input type="text" id="rbg_value" /></span>
<span><canvas id="color_p
我有一个kineticjs,我使用标签得到kineticjs画布的位置是中心
#mycanvas{text-align:center;}
当运行它时,事件区域远离对象200px,在对象的左侧。
我不明白为什么?
谢谢大家的回答 如果您使用的是jquery,下面的解决方法对我来说很有效
$("#container canvas:last").css("position", "relative");
不太好,但希望这能帮助一些人。向我们展示javascript可能会有所帮
下面的代码尝试从工具栏中选择的按钮将图像绘制到鼠标位置的画布中。根据打印的坐标正确计算位置,但图像放置在错误的位置。
守则:
导入'dart:html';
课堂测试{
ImageElement工具栏\所选\元素=null;
画布元素画布;
num mouseX=null,mouseY=null;
void main(){
canvas=查询(“#canvas”);
canvas.onClick.listen(canvas\u onClick);
对于(queryal中的var toolbutto
标签: Canvas
createjsimage-preloader
我正在用画布和地图绘制二维等轴测地图。我有内存问题,所以我使用PrelodJS,我用lib加载了我所有的tile,如:
preload = new createjs.LoadQueue(false);
preload.loadFile({id: "first", src:"MY_URL"});
myImage = preload.getResult("first");
new createjs.Bitmap(myImage);
我装了很多这样的瓷砖。
那么,我如何测试我所做的是否有用呢?我没
我试图找到一种方法让鼠标控制与scaled Fabric.js canvas一起工作
我不知道怎么做。有什么帮助吗?你能解释一下你想要实现的是什么吗?如果画布缩小了,但其他功能正常工作(鼠标控制对象),我会将其与插件一起使用,以便用户可以设计打印质量的设计。这意味着前端将与缩小的画布(400x400px)一起工作后端可以导出原始大小的画布(1000x1000px),看看这个线程是否有帮助,这对我没有帮助。我宁愿缩小画布,然后放大到原始大小,这样我就不会失去任何图像质量。
var canv
我试图实现在画布中移动模式,但几秒钟(或几分钟)后,情况变得难以管理
canvas = document.querySelector('canvas');
canvas.width = 400;
canvas.height = 240;
ctx = canvas.getContext('2d');
image = new Image();
image.src = 'pattern.png';
t = 0;
update();
function update() {
ctx.clearRe
我试图在画布上画出与电脑风格相同的颜色
对于像这样的颜色,这很好:
rgb(0、255、255)”
但是对于像这样的事情
rgba(0,0,0,0)
画布上为黑色,但浏览器中为白色匹配DOM颜色混合
红色、绿色、蓝色和Alpha通道
大多数情况下,您在浏览器中看到的所有图形都由4个通道组成。前3个通道是颜色通道,表示每个组件颜色的强度,红色、绿色和蓝色。第四个通道是Alpha通道,表示像素的透明度。存储在内存中的每个通道宽8位,可容纳256张光盘rete值。对于颜色通道,0表示没有贡献,255表
像canva和adobe spark post这样的应用程序是如何创建完全可定制的模板的,是使用某种编码还是使用psd格式的photoshop创建的。canva和adobe spark都使用拖放功能,因此不需要编码或photoshop,我推荐Canva而不是AdobeSpark,因为我发现它的界面更容易使用。Canva还提供了数千个预先存在的模板,您可以将其用作基本结构并向其中添加更多元素,或者只需编辑一些细节,瞧,您的设计已经就绪。您甚至可以从头开始创建自己的模板,因为它完全是拖放式的,所以变
我在一个图像编辑工具的工作,我想使图像背景去除功能
我使用fabric js-1.7.22进行图像处理。
此功能还包含放大/缩小画布和擦除背景的功能
当前工作流程:
我使用下面的方法使用画布上下文从图像中选择一个像素
canvas.getContext("2d");
然后用我的新目标颜色替换该颜色
问题
我的画布根据窗口大小显示(使用放大/缩小画布自动调整)
现在,当我的窗口太小或者我的图像太大,大约5000px 5000px时,它将自动缩放以适应屏幕
现在,当我在画布上使用鼠标位置获取图
我试图做一个屏幕截图扩展,通过滚动窗口移动整个页面的屏幕截图,并在弹出窗口的画布上将图像缝合在一起。然而,我的问题是,我得到的所有图像都没有被绘制/没有显示在画布上
popup.js
function draw(ctx, image, x ,y) {
console.log(image);
var img = new Image();
img.src = image;
img.onload = function() {
ctx.drawImage(img, x, y);
给定RGB值和图像。我想实现的是使用RGB输入给图像上色,我想用我的RGB值替换图像的主要颜色。
实现这一点最简单的方法是什么?使用类似ColorTheep的脚本从图像中获取主色:
然后使用这种代码将主色替换为所需的颜色
这是未经测试的代码…可能需要进行一些调整:
function recolor(image,predominantRed,predominantGreen,predominantBlue){
// get the image dimensions
var w=
我的应用程序上的导航已中断
这是.cs
这里是
xaml
我已经注释了很多我现在没有使用的代码,因为我正在缓慢地更改应用程序的gui,并慢慢地将其实现。。
如果这有帮助的话,我愿意分享我的资料来解决这个问题
谢谢
.cs
这是xaml文件
<phone:PhoneApplicationPage
x:Class="WPAppStudio.View.MainNews_News"
xmlns="http://schemas.microsoft.com/winfx/2006/
标签: Canvas
drag-and-dropfabricjs
我使用Fabric.js在任何产品上创建设计。我的some产品有两个画布,所以我想将布料。文本从一个画布移动到另一个画布,我想将布料画布对象拖放到其他布料画布。我完全不知道这是否是一个好方法,糟糕或丑陋的做事方式然而,我用一把简单的小提琴来实现你的目标——我所做的基本原则是:
将画布对象封装在对象中,例如,画布id是对象键
var canvases = {
canvas1 : new fabric.Canvas('canvas1'),
canvas2 : new fabric.C
MDN文档页面说明您可以在drawWindow中使用标志:
但是它没有列出任何地方的旗帜。有人知道旗子是什么吗
感谢该页面上实际列出了这些标志,在中,这只是有点不明显。目前,可能的标志有:
绘图窗口\u绘图\u插入符号(0x01)
拉窗不齐平(0x02)
绘图窗口\绘图视图(0x04)
绘图窗口\使用\小部件\图层(0x08)
DRAWWINDOW\u异步\u解码\u图像(0x10)
啊,太简单了,就在那里哈哈,谢谢你!我之所以要寻找这些标志,是因为当我使用drawWindow时,我注意到画
我正在寻找一种在UC浏览器(手机)和三星互联网浏览器中的canvas/webgl元素中播放视频的方法。我的帆布游戏需要它
下一个代码不起作用:
var画布,上下文;
var video=document.getElementById(“视频”);
canvas=document.getElementById(“canvas”);
context=canvas.getContext(“2d”);
canvas.addEventListener(“单击”,鼠标单击);
功能鼠标单击(e){
vid
我必须将大图像(8000x6500)放入800x650画布
当我尝试使用canvas.add()简单地渲染图像,并以100%的比例渲染图像时,得到的图像比原始图像更像素化/模糊
这是我正在使用的代码(只有图像稍微小一点,但您仍然可以看到问题):
您可以看到一个示例JSFIDLE
作为比较,您如何看待konva,禁用图像上的objectCaching将解决像素化问题。默认情况下,Fabric在图像上启用objectCaching,这意味着您的巨大图像将绘制在与图像本身一样大的巨大屏幕外画布上,并且
如何在立体模式下在3D场景中正确显示iframe?iframe将包含一个带有画布的游戏。我正在使用three.js
找到了一个工作示例,但它加载了2个不同的iFrame,并且游戏可以独立工作。也就是说,每只眼睛都有自己独立的iframe工作-
下面是一个示例-您必须插入链接
我试图用另一种方法解决这个问题。添加游戏后,我通过PostMessage从iframe传输画布的当前屏幕截图(例如base64),将其显示在页面的中间画布中,并将此画布作为纹理传输到three.js。电路可以工作,但资源非常
我正在尝试使用Handlebar.js结合Chart.js实现一些图表。到目前为止,我设法让两个图表工作,但第三个显示为一个空画布。我从上一个图中复制了代码,但即使这样,我也只能得到一个空画布。用硬编码数组替换数据和标签似乎也不起作用
当我在forEach循环中记录值时,它会打印正确的值,但当我尝试记录任何其他内容时,我会得到“undefined”。这是正常的JavaScript行为吗
起初,我认为这是一些变量在前面的图表中具有相同名称的结果。但是,由于这不会导致第一个和第二个图表之间出现问题,
我看到的演示中,调整大小的向导显示在背景区域上方,而正在调整大小的对象则正确隐藏在其后面。默认情况下/演示将指南显示为隐藏在背景后面。我怎样才能使它像在图像中一样显示在背景之上
1 2 3 4 5 6 ...
下一页 最后一页 共 19 页