Tag: canvas

创建一个圆形导航菜单: 我想创建一个带有导航项的圆形菜单。约束是文本也是弯曲的。通过绘制2幅canvas，这是我所经历的小提琴，但我仍然无法绑定点击框模型约束的项目原因。我们可以使后面的canvas透明并将其放在原始div或渲染文本上，同时在顶部canvas中渲染canvas。码- function drawTextAlongArc(context, str, centerX, centerY, radius, angle, position, adjustFactor){ context.save(); context.translate(centerX, centerY); context.rotate((position-1)*45*Math.PI/180); context.rotate(-1 * (angle / str.length) / 2); context.rotate((adjustFactor-str.length)/(2*adjustFactor)*45*Math.PI/180); for (var n = 0; n < str.length; n++) { context.rotate(angle / str.length); context.save(); context.translate(0, -1 * radius); var char = str[n]; context.fillText(char, 0, 0); context.restore(); } context.restore(); […]

如何在图形的hover转折点上显示Y轴值: 我正在使用java脚本和canvas制作图表。下面是jsfiddle链接 http://jsfiddle.net/ghan_123/n0r796ae/ 我想在hover泡沫（转折点）上显示值 1月8日价格2100 java脚本 var CanvasChart = function () { var ctx; var margin = { top: 40, left: 75, right: 0, bottom: 75 }; var chartHeight, chartWidth, yMax, xMax, data; var maxYValue = 0; var ratio = 0; var renderType = { lines: ‘lines’, points: ‘points’ }; var render = function(canvasId, dataObj) […]

我可以使用带有外部JSON数据的jQuery以编程方式绘制HTML5 Canvas x / y点吗？: 我有一个HTML5canvas’加点’类型的东西 – 两条线在他们的角点有点 – 这很好但我想以编程方式用外部JSON数据绘制X坐标（从’本地’服务器拉出来不需要是JSONP） – 我希望我能清楚地解释一下…… 我不是想将JSON数据转换为新的DOM元素，而是需要将数据应用于映射canvas坐标的实际脚本。理想情况下我想使用jQuery，我的猜测是我需要通过.getJSON（）来解析JSON对象，但这是我需要帮助的地方。 X和Y坐标当前都是使用canvas脚本中的硬编码变量启动的，但是我希望JSON数据以编程方式解析为X变量（Y co-ords可以保持硬编码并且对两行都能正常工作）。这是我到目前为止的一个小提琴： http ： //jsfiddle.net/ByT58/6/ 这是标记/脚本供参考 – 并提前感谢任何帮助！： HTML：以下是外部JSON的外观： { “red”: { “r01x”: 20, “r02x”: 149, “r03x”: 50 }, “blue”: { “b01x”: 80, “b02x”: 179, “b03x”: 20 } } JS： var ctx = document.getElementsByTagName(‘canvas’)[0].getContext(‘2d’); // set attributes for all circles var radius = […]

转换后的图像应该有一些小的url而不是BaseCode: 现在我将图像上传到canvas上，在上传图像后，canvas由toDataURl转换为图像。如果我通过toDataURL将canvas转换为图像，那么我将获得基本代码（基本代码将很大）。我想要一些小url而不是BaseCode。 var canvas = new fabric.Canvas(‘canvas’); document.getElementById(‘file’).addEventListener(“change”, function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; var img = document.createElement(‘img’); img.src = data; img.onload = function () { if (img.width < 300 || img.height < 300) { alert("upload image should be […]

用动画填充颜色: 用动画填充彩色canvas动态。我创造了帆布圆筒，它填充了颜色。当我动态填充颜色时我需要动画示例（慢慢填充它）。我已经在谷歌搜索了，我得到了动画效果：动画function中的fadein / ease。但没有什么对我有用 var perc = 0; $(document).ready(function () { $(“#my_input”).focusout(function (event) { if ($(“#my_input”).val().indexOf(“%”) != -1) { if ($.isNumeric($(“#my_input”).val().replace(‘%’, ”))) { // Allow only backspace and delete if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37) { //$(“#myCanvas”).animate({ opacity: 0.25 }); } else { // Ensure that […]

iPhone上的HTML5 Canvas在touchstart / mousedown事件中突出显示: 每当触摸（并保持）canvas时，它都会以较暗的颜色突出显示。触摸释放后，恢复正常。它不像文本选择，它与iPhone在超链接上使用的亮点相同。我使用jQuery来绑定事件： $(‘canvas’).bind(‘mousedown touchstart’, function(e) { var c = $(this), offset = c.offset(); var touch = { x: (e.targetTouches ? e.targetTouches[0].pageX : e.pageX) – offset.left, y: (e.targetTouches ? e.targetTouches[0].pageY : e.pageY) – offset.top }; testApp.lastTouch = touch; return false; }); 当应用程序保存到“主屏幕”时，问题会更严重。当触摸canvas的边缘时，它确实发生在Web浏览器中，但是在主屏幕应用程序上，无论触摸的是哪个canvas，它都会执行它。可能是这个问题的原因是什么？

使用自定义名称将canvas和表单发送到服务器保存图像: 我正在尝试将canvas图像发送到服务器。大家好，我知道这已被问过很多。（我之前已经问了一次）表单数据也被发送，这用于命名发送到服务器的文件，以便可以识别谁绘制了图像。我的网站在这里！ HTML Name Email JS // sends image to server // serialize your canvas var dataURL=document.getElementById(‘colors_sketch’).toDataURL(image/png); // serialize your form var str = $(“form”).serializeArray(); // wrap both in an object var package={ formData: str, imageDataURL: dataURL } // ajax it postImagePlusForm(); function postImagePlusForm(){ $.ajax({ type: “POST”, url: “PHPtestupload.php”, data: package, […]

HTML canvas双缓冲帧率问题: 我有一个全屏canvas，上面画有3张图片。当我调整窗口大小时，这些图像会改变位置; 然而，它似乎非常小问题，在Firefox中更是如此。我一直在读，双缓冲应该解决这个问题，但我想知道如果下一个位置未知，我将如何双缓冲。也就是说，我无法确定将来应该缓存什么，那么这怎么可能呢？这是一个看似可行的来源，但我并不完全理解Fedor试图解释的概念。 HTML5 / Canvas是否支持双缓冲？到目前为止，我有， $canvas = $(‘#myclouds’)[0]; $canvas_buffer = $(‘canvas’)[0].insertAfter($canvas).css(‘visibility’, ‘hidden’); context = $canvas.getContext(‘2d’); context_buffer = $canvas_buffer.getContext(‘2d’); clouds_arr = [$canvas, $canvas_buffer]; $(window).resize(function () { drawCanvas(); }; function initCanvas() { // Sources for cloud images var cloud1 = ‘/js/application/home/images/cloud1.png’, cloud2 = ‘/js/application/home/images/cloud2.png’, cloud3 = ‘/js/application/home/images/cloud3.png’; // add clouds to be […]

如何在html5canvas中逐步绘制线条动画: 我正在使用canvas。我画了一套线。这是我的示例代码 for(var i = 0 ; i< points.length; i++){ var point = points[i]; setInterval(function() { ctx.strokeStyle = "black"; ctx.moveTo(point.startX, point.startY); ctx.lineTo(point.startX1, point.startY1); ctx.stroke(); }, 500); } 此代码每0.5秒后绘制一行。但我希望逐步制作动画。所以请帮助逐步划清界限。此屏幕截图显示输出。我在SVG中做到了这一点。但我在canvas上需要相同的东西。

jquery旋转图像并用同名文件保存（覆盖）？: 我有一个这样的简单场景：我想旋转图像，并保存现有的旧文件。现在，所有function都已完成，但是当我下载/保存图像时，它始终会创建新的文件名。这是我的代码： Rotate Image: Reset Image 90° 180° 270° Download as image 我的js代码： var img = null, canvas = null; $(document).ready(function(){ // Initialize image and canvas img = document.getElementById(‘image’); canvas = document.getElementById(‘canvas’); if(!canvas || !canvas.getContext){ canvas.parentNode.removeChild(canvas); } else { img.style.position = ‘absolute’; img.style.visibility = ‘hidden’; } rotateImage(0); // Handle clicks for control links $(‘#resetImage’).click(function(){ […]