我打算用svg绘制一张“地图”(城市,河流,道路等).因此,将在一个svg图像中绘制所有对象,并且仅显示可视区域内的那些(可见). 问题1： 这是合理的方法吗？或者我会更好地关注需要绘制哪些特定对象？ 我想要实现的功能之一是“拖动”地图.它计划如下工作：用户点鼠标光标在地图内的某个地方,按下鼠标按钮并移动鼠标.因此,一些对象将离开可视区域,而其他对象将被绘制. 问题2： 更改可见对象的坐标是否更好,以便根据鼠标移动来移动它们？...
当我在完成加载整个gif之前将gif图像绘制到canvas元素时,它只是一个白色区域.但如果我这样做window.stop()在它完成之前,它会在元素中绘制gif.问题是停止整个页面会停止所有的GIF而不是我想要复制到画布的特定GIF.如何在完成加载整个gif之前,将gif中当前加载的内容绘制到canvas元素中.我想的可能是将它放在iframe中并停止iframe或其他类似的技巧,但我也想要一些你们提供的想法或解决方案. 编辑：有没有办法检测使用javascript以百分...
我正在使用canvas标签开发一个基于JavaScript的简单游戏.作为游戏的一部分,我有几个大的精灵表(例如2816768和40964864),每个精灵表都包含屏幕角色的相关动画.当游戏开始时,游戏只会播放角色的空闲动画.当用户按下空格时,我开始从完全不同的spite表格中播放另一个动画. 以下是绘制精灵的代码：Sprite.prototype.drawFrame = function(x, y) {ctx.drawImage(this.image,x*this.width, y*this.height,this.width, this.height,this.po...
我的应用程序基于用户将图像放置在画布上(通过我创建的使用lineTo()的函数和arc()来创建复杂的形状)然后让它们缩小以获得更高级别的图片,了解他们已完成的工作.同样,他们可以加载其他人的创建和放大,以更详细地查看所有这些对象的外观. 这可能吗？当我想放大时,我在想谷歌地图类型缩放. 如果不可能,是否有其他解决方案,例如使用常规图像和重新调整页面的一部分？ 感谢您的任何帮助.解决方法:所以这就是你在想的：scale().ctx.save(...
我有兴趣了解用于绘制交互式图形的最轻量级的JavaScript库.我拥有的数据主要是与海洋研究有关的科学数据. 我知道一些jquery库,即Highcharts和JS图表.但我要找的是最轻量级的库.该图表不需要提供实时数据,但必须是交互式的.解决方法:我肯定会推荐D3.js. 有一些非常好的数据驱动文档和使用它的例子.最近的VizSec会议的许多演讲也使用了它.
我试图画一个矩形,擦除它并在画布上重绘另一个矩形.这三个操作的结果是有两个矩形. Html 5 api javascript：http://pastebin.com/Qgf38C7mfunction Oggetto(idname,nome,posizione_x,posizione_y,width,height,doption){this.nome = nome ; this.posizione_x = posizione_x ;this.posizione_y = posizione_y ;this.width = ...
这是一个非常基本的问题,但请帮助因为我尝试解决这3天,我没有任何答案.我尝试了很多解决方案但是又一样. 这里我有一个nArray函数,它返回一个bigArray JSON,其中包含如下所示的对象：bigArrayArray[5]0: Object1: ObjectDISTANCE_FROM_PREVIOUS_OBJECT_LOCATION: 2.087970147789207lat: "48.866588"leftPosition: 183lng: "2.309037999999987"topPosition: 57__proto__: Object2: Object3: Object4: Objectlength: 5__proto__: Arra...
我做了一个简单的jsbin在两点之间划一条线. (没有绘图库.只是js / jq). 我已经有了计算角度的代码(我从this库中获取). 所以它看起来像这样： 当我拖动右下方圆圈(我添加了jquery draggable)时,它看起来都很好.为什么看起来不错？ 因为原点 – 变换的代码是：左上角$("#line") .width(...).css('-webkit-transform', 'rotate(' + angle + 'deg)').css('-webkit-transform-origin','top left').因此div(实际上是红线)旋转轴是左上角...
如果我在JavaScript中有一组像素数据,是否有一种在HTML页面上显示它的好方法？ >在Safari和Firefox的最新版本中,我可以创建一个< canvas>元素并使用putImageData来显示像素,但理想情况下,解决方案也适用于旧版本,更重要的是,可以在Internet Explorer上工作.>另一种似乎更有形的解决方案可能是将像素编码为标准图像格式并创建数据：带有像素的URI并将其设置为< img>的src.元件.不幸的是,似乎大多数图像格式都很复杂,我很难找到一个可...
将图像绘制到画布上时遇到问题.没有错误,但仍然没有绘制图像.请查看代码块,看看你能不能看到我不能：function loadPacman(posX, posY) {this.posX = posX;this.posY = posY;pacman = new Image();pacman.src="http://www.frogbug.se/pacman/img/naziman.png";pacman.addEventListener("load", function(){canvas.drawImage(pacman, this.posX, this.posY)}, false); }function loadGhost(posX, posY) {this.posX = posX;this.posY ...
所以,我想用HTML5创建一个Minecraft网站主题.我在HTML5 / Javascript中有点摇摇欲坠(暂时没用过它),我需要一些帮助.我正在尝试计算一些可以放在屏幕上的16x16px瓷砖.然后,随机“生成地图”作为屏幕背景.然后,我使用相同的2 for循环生成地图,用填充图块填充屏幕(在生成过程中分配图片路径).问题是,画布完全是白色的.任何人都可以选择问题,并在可能的情况下给我任何提示吗？提前致谢！这是我的HTML5代码：<!DOCTYPE html> <html><hea...
我在为我绘制的对象实现“擦除”功能时遇到了麻烦.我画这样的对象：function draw_obj1(context) {context.lineTo(...)context.arc(...)//etc }这些画面超出了我对画布的图像背景(通过context.createPattern,fillStyle = pattern等). 所以说上面的函数使用各种lineTo调用描绘出一个三角形.现在要“擦除”或“撤消”这个绘图,我的一个计划是重新绘制同一个对象的“xor”版本,以撤消它.我是通过context.globalCompositeOperation(参见...
我创建了一个Chrome扩展程序,可以绘制用户输入的数学公式的图形.为了轻松获得y的值,我使用了eval()(是的,我知道它很糟糕),因为它是实现它的最简单方法.var equ = $("#equ1").val(); //some element//let's say equ = "2(2^x) + 3x"//some magic code //equ becomes "2*(pow(2,x))+3*x"for(var x = -10; x < 10; x++){var y = eval(equ.replace(/x/ig, x)); //calculate y valuedrawPoint(x, y); } console.log("G...
我试图用画布画线,我用for循环改变坐标. 这是我的canvas元素：<canvas id="c" width="300px" height="300px"></canvas>这是js代码：var c = document.getElementById('c'); ci = c.getContext('2d'); for(var a = 18; a < 300; a +=18){fnc(a, ci);} function fnc(x, ci){ci.strokeStyle = 'red'; ci.moveTo(0, x); ci.lineTo(300, x); ci.lineWidth = 0.2; ci.stroke(); }正如你所看到的,我试图在它们之间绘制18px空格.但是线条...
我对这一切都不熟悉,似乎无法弄清楚如何制作一个for循环(如果可能的话),它将绘制我正在寻找的线的类型.我试图用帆布创建一个南瓜的图像,并想要勾勒出牙齿.我希望有一种比输入所有代码更简单的方法来绘制轮廓牙齿所需的各条线.这是每个单独行的代码,但我似乎无法弄清楚for循环会做同样的事情.任何帮助将不胜感激.谢谢.context.beginPath(); context.strokeStyle = '#cc5200'; context.moveTo(220, 590); context.lineTo(220, 550); ...