Tag: html5

使用javascript中的mousemove事件在canvas内的图像上绘制一个矩形: 我试图在使用mousemove事件的canvas内的图像上绘制一个矩形。但由于clearRect，我在图像上得到矩形，颜色填充在矩形中。任何人都可以把我搞清楚如何在图像上绘制一个只有边框的矩形。下面是我实现它的代码。 var canvas = document.getElementById(‘canvas’), ctx = canvas.getContext(‘2d’), rect = {}, drag = false; function init() { var imageObj = new Image(); imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); }; imageObj.src = ‘http://sofzh.miximages.com/javascript/darth-vader.jpg’; canvas.addEventListener(‘mousedown’, mouseDown, false); canvas.addEventListener(‘mouseup’, mouseUp, false); canvas.addEventListener(‘mousemove’, mouseMove, false); } function mouseDown(e) { rect.startX = e.pageX – this.offsetLeft; […]

在canvas中上传的图像可以在html5中拖动，触摸和旋转: 我是Html5的新手。我正在上传一张图片，但它没有在canvas中显示，如果我提供图像的直接来源，那么它将会正常工作。我从这个链接获取帮助javascript：上传图像文件并将其绘制到canvas我会告诉你我的代码。 body { padding:0px; } #canvas { border:1px solid red; } Click and drag the image or drag the dots to resize. <!– Text: –> var canvas = document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’); // var Input = document.getElementById(‘words’); var x = 10; var y = 30; ctx.font = “bold 20px sans-serif”; ctx.fillStyle = […]

在页面加载之前隐藏HTML元素的正确方法是什么？: 我已经找到了这个问题的许多部分答案，但似乎没有什么似乎是一个明确的答案。对于这样一个重要的技术，我发现这有点奇怪。我应该如何隐藏元素（使用javascript），以便在JS有机会隐藏它们之前页面加载时它们不会短暂出现？我不想将它们设置为最初使用CSS隐藏，就像用户没有Javascript一样，它们什么也看不见。要清楚。我不是问如何处理向没有JS的用户显示内容。这是一个完全不同的主题。我只想要一种可靠的方法来隐藏HTML元素，然后再显示它们。所以我的要求：最初使用CSS不会隐藏HTML元素如果JS可用，则隐藏这些元素，以便它们永远不会显示，甚至不会立即显示。这意味着将它们隐藏在身体末端加载的JS中。

在窗口resize之前，ChartJS不会在引导选项卡中绘制图形: 我正在每个标签页面中使用带有chartjs图表的bootstrap选项卡。发生的一个问题是在我调整浏览器窗口大小之前不会绘制图形canvas。这种情况在最新的Chrome和Firefox中都有发生。我一直在尝试不同的解决方案，因为在更改选项卡后绘制图形但没有结果。不幸的是我无法在jsfiddle中复制问题，不知何故它似乎在那里工作。但除了html5样板之外，还有几乎所有的代码。有谁知道为什么会发生这种行为？谢谢！ /** * ChartJS using JSON data and moment.js for time display * Code is quite ugly due to experimentation */ function getJSON(){ $.getJSON( “data.json”, function(data){ var dataArray = []; console.log(data); var series = {}; for (var x in data.Series) { var dates = []; var values = […]

如何为标签设置特定的起始音量: 我只掌握HTML和CSS的基本知识，并且已经广泛地浏览了Google，试图找到这个问题的答案 – 这一切似乎都指向JavaScript和/或jQuery。我试过了，我无法让它发挥作用。我有一个音频文件，当我的网站加载时开始播放。我想设置一个特定的起始音量，以便我的访客在音量很高时不会受到心脏病发作。这就是我所拥有的： HTML： CSS： #bgAudio { position:fixed; z-index:1000; width:250px; } JavaScript的： backgroundAudio=document.getElementById(“bgAudio”); backgroundAudio.volume=0.5; 任何帮助将不胜感激！

滑块移动时获取滑块的价值？: 我正在学习一些基本的前端Web技术 – Bootstrap，jQuery，HTML5 canvas – 我希望能够在滑块移动时更新我正在绘制的正弦曲线的尺寸，而不是在它发布时（如何发布）目前有效）。 drawShape(); drawGraph(200, 150); $(“#ampSlider”).val(200); $(“#freqSlider”).val(150); function refreshGraph() { console.log($(“#ampSlider”).val()); drawGraph($(“#ampSlider”).val(), $(“#freqSlider”).val()); } function drawGraph(amp, freq) { console.log(“Drawing: ” + amp + ” | ” + freq); var canvas = document.getElementById(‘graphCanvas’); var context = canvas.getContext(‘2d’); context.clearRect(0, 0, canvas.width, canvas.height); var y = canvas.height/2; context.lineWidth = 10; context.beginPath(); context.moveTo(0, y); for(n […]

使用jQuery / HTML5为圆圈设置动画: 对于个人项目，我正在制作一个计时器应用程序（用于控制扑克盲人时间表）。我知道市场上已经有几种解决方案，但由于原因太长而无法进入，我们需要一个定制的系统。尽管最终用户最终可以定义系统的输出模板，但我们希望包含一个小部件，该小部件显示随着时间倒计时动画的圆圈。这是一个工作示例的说明，显示了黄色圆圈以及我们想要实现的目标（或者类似的东西）：我的问题是，如何使用jQuery或原始HTML5 / CSS3动画编码动画如下所示？这是使用jQuery的Web应用程序，因此我没有其他库选项可供使用。高级谢谢！

将光标设置为contenteditable div的结尾: 我试图将光标设置为next / prev contenteditable标记的末尾，如果当前的标记为空，但是当我设置焦点时，它会将焦点添加到文本的开头而不是结束尝试几乎所有解决方案都在SO上但似乎没有为我工作。这是我正在尝试的简单代码 HTML代码 Content one Content 2 Content 3 Content 4 JS代码 $(‘#main div’).keydown(function(){ if(!$(this).text().trim()){ $(this).prev().focus(); //setCursorToEnd(this.prev()) } }); function setCursorToEnd(ele) { var range = document.createRange(); var sel = window.getSelection(); range.setStart(ele, 1); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); ele.focus(); }

跨浏览器HTML5存储库: 我有一个要求，当互联网不可用时，应该在本地存储。它应该以跨浏览器兼容的方式处理它。现在我知道有很多选项可以在本地存储数据（indexedDB，WebSQL，localStorage）。我真正想要的只是一个统一的API。我不想检测和编写多个存储引擎的代码。我真正关心的是给出一个密钥，并提供数据，它应该在浏览器会话/崩溃中持久存在。经过大量的谷歌搜索，我实际遇到的唯一的图书馆是persisJS： http://pablotron.org/?cid=1557 但它大约有4年半的历史。有没有更好或更可靠，更新的？