对于绘图应用程序,我将鼠标移动坐标保存到数组,然后使用lineTo绘制它们.生成的线条不平滑.如何在所有聚集点之间生成单条曲线？
我用谷歌搜索但我只找到了3个绘制线的函数:对于2个样本点,只需使用lineTo.对于3个样本点,quadraticCurveTo,对于4个样本点,bezierCurveTo.
(我尝试在阵列中每4个点绘制一个bezierCurveTo,但这会导致每4个采样点扭结,而不是连续的平滑曲线.)
如何编写一个函数来绘制一个包含5个样本点的平滑曲线？
我一直试图改变我的画布的默认背景颜色,从黑色到透明/任何其他颜色 - 但没有运气.
我的HTML:
<canvas id="canvasColor">
我的CSS:
<style type="text/css">
#canvasColor {
z-index: 998;
opacity:1;
background: red;
}
</style>
正如您在下面的在线示例中所看到的,我在画布上附加了一些动画,所以不能只做一个不透明度:0; 在id上.
实时预览:http: //devsgs.com/preview/test/particle/
有任何想法如何覆盖默认黑色？
我想根据相机在JPEG EXIF图像数据中设置的原始旋转来旋转照片.诀窍是所有这一切都应该在浏览器中使用JavaScript和<canvas>.
JavaScript如何访问JPEG,本地文件API对象,本地<img>或远程<img>,EXIF数据来读取旋转信息？
服务器端的答案不对; 我正在寻找客户端解决方案.
除了性能之外,是否有任何理由使用WebGL代替2D-Canvas用于2D游戏/应用程序？
换句话说,WebGL提供的2D功能是不可能用2D-Canvas轻松实现的？
我一直在研究HTML canvas库,我遇到了这个问题.HTML canvas JavaScript库和框架的当前最新技术是什么？那是在2010年被问到的.最好的答案是Fabric.js.在做了一些研究之后,我遇到了http://www.html5canvastutorials.com/,其中包含有关KineticJs的教程,这些教程拥有多个速度画布.后来进行的一项研究表明,在速度和功能方面,Canvas库似乎已经到处都是.今天JavaScript Canvas库和框架的当前状态是什么？有一个出现在顶部？
编辑:由于图书馆不断变化,很多人最近来到这里获取有关新图书馆的新闻和信息,我将问题改为更加永恒.
我试图将两个画布堆叠在一起,使其成为双层画布.
我在这里看到了一个例子:
<div style="position: relative;">
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
但我想将两个画布对齐设置在屏幕的中心.如果我将'left'的值设置为常量,当我更改屏幕的方向时(因为我在iPad上执行aps),画布将不会像屏幕中间一样保留在屏幕中间
<div align="center">
有人可以帮忙吗？
我试图用鼠标画在HTML5画布上,但它似乎运行良好的唯一方法是如果画布位于0,0(左上角),如果我改变画布位置,由于某种原因它不会像它应该画的那样.这是我的代码.
function createImageOnCanvas(imageId){
document.getElementById("imgCanvas").style.display = "block";
document.getElementById("images").style.overflowY= "hidden";
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
var img = new Image(300,300);
img.src = document.getElementById(imageId).src;
context.drawImage(img, (0),(0));
}
function draw(e){
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
posx = e.clientX;
posy = e.clientY;
context.fillStyle = "#000000";
context.fillRect (posx, posy, 4, 4);
}
HTML部分
<body>
<div id="images">
</div>
<canvas onmousemove="draw(event)" style="margin:0;padding:0;" id="imgCanvas"
class="canvasView" width="250" height="250"></canvas>
我已经读过有一种方法可以在JavaScript中创建一个简单的函数来获得正确的位置,但我不知道如何做到这一点.
我和n00b一起HTML5工作,我正在使用它canvas来渲染形状,颜色和文字.在我的应用程序中,我有一个视图适配器,动态创建一个画布,并用内容填充它.除了我的文本呈现非常模糊/模糊/拉伸之外,这非常有效.我已经看到了很多,为什么定义其他职位的宽度和高度在CSS会引起这个问题,但我确定这一切javascript.
相关代码(查看小提琴):
HTML
<div id="layout-content"></div>
使用Javascript
var width = 500;//FIXME:size.w;
var height = 500;//FIXME:size.h;
var canvas = document.createElement("canvas");
//canvas.className="singleUserCanvas";
canvas.width=width;
canvas.height=height;
canvas.border = "3px solid #999999";
canvas.bgcolor = "#999999";
canvas.margin = "(0, 2%, 0, 2%)";
var context = canvas.getContext("2d");
//////////////////
//// SHAPES ////
//////////////////
var left = 0;
//draw zone 1 rect
context.fillStyle = "#8bacbe";
context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6);
left = left …请看下面的例子:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
img = new Image();
img.onload = function(){
canvas.width = 400;
canvas.height = 150;
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150);
}
img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg";
如您所见,虽然据说drawImage会自动应用抗锯齿,但图像不会消除锯齿.我尝试了很多不同的方法,但似乎没有用.你能告诉我如何获得抗锯齿图像吗？谢谢.
有没有办法将HTML Canvas的内容作为二进制数据读取？
目前我有以下HTML来显示输入文件和它下面的画布:
<p><button id="myButton" type="button">Get Image Content</button></p>
<p>Input:<input id="fileInput" type="file"/></p>
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p>
我然后设置我的输入文件以正确设置画布,这工作正常:
$('#fileInput').on('change', function() {
$.each(this.files, function() {
var image = new Image();
image.src = window.URL.createObjectURL(this);
image.onload = function() {
$("canvas").drawImage({
source: image,
x: 50, y: 50,
width: 100,
fromCenter: false
});
};
});
});
我现在需要在单击按钮时从Canvas获取二进制数据(Base64编码),因此它会将数据推送到服务器...
最终的结果是我需要为用户提供选择文件的能力,裁剪/调整大小,然后单击一个按钮,此时编辑的图像将上传到服务器(我不能做服务器端)由于服务器端限制而裁剪/调整大小...)
任何帮助都会很棒!干杯
html5-canvas ×10
html5 ×6
javascript ×6
canvas ×4
css ×2
antialiasing ×1
bezier ×1
exif ×1
fileapi ×1
jpeg ×1
spline ×1
three.js ×1
webgl ×1