草庐IT

canvas2d

全部标签

javascript - 带有 AngularJS 的 ChartJS - Canvas 不会显示任何内容

我正在尝试使用angular-chartjs图书馆,但遇到了一些问题。页面上没有错误。但是Canvas是空的。有人有想法吗?我试过几次重新排序脚本。我只是想不通。:(这是html。这是应用初始化:varapp=angular.module('profitly',['ngRoute','chartjs']);这是这部分的Controller:app.controller('graph',function($scope){$scope.someData={labels:['Supply','May','Jun'],datasets:[{data:[1,7,15,19,31,40]},{da

javascript - 在 HTML canvas 上一条接一条地绘制连续的线条

我正在尝试为上述问题编写代码。我试着找到解决办法。这是我目前拥有的。varcanvas=document.getElementById('canvas');varcontext=canvas.getContext('2d');vardrawColorLine=function(start,end,color){vardeltaX,deltaY,i=0,currLength=0,isHor,isVert;deltaX=end[0]-start[0];deltaY=end[1]-start[1];context.strokeStyle=color;isHor=deltaX===0?0:1;

javascript - 将字节转换为图像以在 HTML5 Canvas 上绘制

有人知道我如何将通过websocket(从C#应用程序)发送的字节转换为图像吗?然后我想在Canvas上绘制图像。我可以看到两种方法:以某种方式在Canvas上以字节形式绘制图像而不进行转换它。然后在javascript中以某种方式将字节转换为base64字符串画画。这是我接收绘图字节的函数:functiondraw(imgData){varimg=newImage();img.onload=function(){cxt.drawImage(img,0,0,canvas.width,canvas.height);};//WhatIwasusingbefore...img.src="da

javascript - 我在 Chrome 中收到 "Canvas has been tainted"错误,但在 FF 中没有

我的Javascript实现有问题。该脚本将在Firefox中运行,但在Chrome中它会显示:Unabletogetimagedatafromcanvasbecausethecanvashasbeentaintedbycross-origindata.index.html:1UncaughtError:SecurityError:DOMException18有谁知道造成这种不一致行为的原因是什么? 最佳答案 Chrome不认为不同的本地文件来自同一域。也就是说,您通过file://URL引用的每个本地文件都被视为来自与其他file

javascript - HTML5 Canvas : Moving/panning world with arrow keys in EaselJS

经过一年的学习和反复试验,我觉得我开始对JavaScript有了更多的了解。所以,现在,我想尝试编写一个简单的2D平台游戏(想想《super马里奥世界》或《刺猬索尼克》)。为此,我将使用EaselJS库。我想弄清楚如何使用左右箭头键在Canvas中移动/平移“世界”。我知道如何在箭头键的keydown上运行函数,但我不太确定应该如何处理移动/平移。当按下一个键时,我是否应该调整Canvas中每一个东西的位置/坐标?或者我是否应该将所有东西都放在一个容器中并移动容器的位置/坐标?我会感激任何能将我推向正确方向的东西。泰夫姆:)更新了答案Thechosenanswerbelow确认我确实必

javascript - 如何知道 Canvas 是普通 Canvas 还是webgl Canvas

如何知道Canvas运行的是“WebGL”还是普通Canvas?通过检查源代码,我发现这两种情况都是Canvas。 最佳答案 这真的取决于你想如何去发现。例如你可以这样调用`getContext'if(someCanvas.getContext("2d")){//It'sa2Dcanvas}elseif(someCanvas.getContext("experimental-webgl")||someCanvas.getContext("webgl")){//It'saWebGLcanvas}不幸的是,如果之前没有人调用过getCo

javascript - 将 Raphael JS 在 Canvas 中生成的 SVG 保存为 png 时出现问题

我正在尝试转换RaphaelJS生成的SVG(和用户,因为您可以拖动和旋转图像)。我跟着这个ConvertSVGtoimage(JPEG,PNG,etc.)inthebrowser但仍然无法获取。这一定很简单,但我不能指出我做错了什么。我将我的svg放在一个div中,#ec作为id,Canvas的是#canvas。functionsaveDaPicture(){varimg=document.getElementById('canvas').toDataURL("image/png");$('body').append('');}$('#save').click(function(){

javascript - Html5 Canvas Bezier 上的虚线曲线

对于我的一个应用程序,我需要在Html5Canvas中的贝塞尔曲线路径上绘制虚线曲线...破折号的长度和中间的间隙应该是可变的...它可以在JavaFx中实现,seethislink...我想使用Html5Canvas实现相同的效果。我知道如何绘制直线虚线,但不知道如何沿着贝塞尔曲线绘制曲线...虽然我不是专家,但我知道bezierdrawingalgorithm,我看到这个算法的问题是,它允许您使用范围从0到1的时间参数来识别贝塞尔曲线上的坐标...这还不够,因为要绘制虚线贝塞尔曲线,我需要在主要贝塞尔曲线路径上绘制许多具有指定长度参数和给定间隙距离的小贝塞尔曲线。JavaFx必须使

javascript - flot:无法使用 Canvas 中包含的标签绘制饼图

我正在尝试制作一些图表,但遇到了这个奇怪的错误消息。这是一个有效的例子:$.ajax({type:"GET",dataType:"json",url:"/data/active_projects_per_phase",success:function(result){$.plot($("#active_per_phase"),result,{series:{pie:{show:true,label:{show:true,radius:3/4,formatter:function(label,series){returnlabel+':'+series.data[0][1]+'('+Ma

javascript - 如何使用 Canvas 将圆圈分成 24/7 等份?

GrowingCirclesJavaScriptvarcanvas=document.getElementById("c"),ctx=canvas.getContext("2d");ctx.lineWidth=3;ctx.beginPath();ctx.arc(500,350,60,0,2*Math.PI,false);ctx.fillStyle="#4DA54D";ctx.fill();ctx.strokeStyle="DarkRed";ctx.stroke();ctx.beginPath();ctx.arc(500,350,120,0,2*Math.PI,false);ctx.st