标签: html5-canvas

我想在HTML 5.0画布中绘制3D球或球体.我想了解关于如何绘制3D球体的算法.谁能与我分享？

我需要一些帮助..

我试图在绘图后保存画布图像..

按照这个例子(http://www.dotnetfunda.com/articles/article1662-saving-html-5-canvas-as-image-on-the-server-using-aspnet.aspx)

$("#btnSave").click(function () {

    var image = document.getElementById("canvas").toDataURL("image/png");
    image = image.replace('data:image/png;base64,', '');

    $.ajax({
        type: 'POST',
        url: "../../Home/UploadImage?imageData=" + image,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            alert('Image saved successfully !');
        }
    });
});

控制器:

public void UploadImage(string imageData)
{
    string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
    using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
    {
        using (BinaryWriter bw = new BinaryWriter(fs))
        {
            byte[] data = Convert.FromBase64String(imageData);
            bw.Write(data);
            bw.Close();
        } …

我一直在尝试使用canvas元素,并且很好奇如何实现效果.

我从一系列教程和演示中得到了我正在寻找的东西,但我需要一些帮助才能完成剩下的工作.我正在寻找的是将图像像素化mouseover,然后重新聚焦/取消像素化mouseout.当鼠标悬停在主旋转木马下方的块上时,您可以在http://www.cropp.com/上看到一个很好的效果示例.

这是我开始的小提琴的链接.小提琴不起作用,因为你不能使用跨域图像(womp womp),但到目前为止你仍然可以看到我的代码.当鼠标悬停在我的画布对象上时,我能够将图像像素化,但它有点落后于我想要的东西.任何帮助或建议将不胜感激.

var pixelation = 40,
    fps = 120,
    timeInterval = 1000 / fps, 
    canvas = document.getElementById('photo'),
    context = canvas.getContext('2d'),
    imgObj = new Image();

imgObj.src = 'images/me.jpg';
imgObj.onload = function () {    
    context.drawImage(imgObj, 0, 0);
};

canvas.addEventListener('mouseover', function() {
    var interval = setInterval(function () {
        context.drawImage(imgObj, 0, 0);

        if (pixelation < 1) {
            clearInterval(interval);
            pixelation = 40;
        } else {
            pixelate(context, canvas.width, canvas.height, 0, 0);
        }
    }, timeInterval); …

在下面的代码中,第二个fillStyle覆盖第一个中指定的颜色,如果我使用rect()然后fill()在两个地方(即两个rects都是绿色)但按预期工作(即,第一个rect是蓝色,第二个是绿色)如果我改变第一个rect()到fillRect().为什么会这样？我以为fillRect()只是rect(),然后fill(),对不对？

ctx.translate(canvas.width/2, canvas.height/2);

ctx.fillStyle = "#5A9BDC";
ctx.fillRect(0, 0, rectWidth, rectHeight);
// ctx.rect(0, 0, rectWidth, rectHeight);
// ctx.fill();    

ctx.translate(-canvas.width/2, -canvas.height/2);

ctx.fillStyle = "#31B131";
ctx.rect(0, 0, rectWidth, rectHeight);
ctx.fill();

在Chrome中测试过 | 小提琴

我目前正在开发一款JavaScript(pure js)基于游戏的游戏.游戏包含5个大型精灵表(例如2861×768和4096×4864).游戏开始时,所有5个精灵表都预先加载到画布元素.这5个精灵中的三个一起表示一个动画,其中每个精灵包含75个帧.当一个精灵以其动画结束时,我隐藏它并显示下一个精灵.当第二个精灵完成动画时,我隐藏它并显示第三个/最后一个.

当即将显示第二个或第三个精灵时,会发生0.5秒-1秒的小延迟.图像正在被解码.

这不是第一次发生的事情,它总是发生的事情.并且该动画每5分钟重复一次,并且总是发生小延迟.

我之所以使用canvas元素进行预加载,是因为我认为WebKit会丢弃解码图像一段时间未使用,而canvas元素会阻止WebKit将其从内存中删除.但这不起作用.

我已经尝试了几乎所有我所知道的优化.我甚至通过删除后代选择器等重构了我的所有CSS.

我用来绘制这些动画的渲染器是由我自己构建的,它工作得很完美,所以这不是问题,因为它在Firefox中工作得非常好.

编辑[2016/03/04]: 我用帆布制作了一个模式,结果更糟.它落后很多.而延迟仍然是一样的.仅在NW中,Chrome中的问题并不存在.

画布模式 - 滞后:

默认(HTML)模式 - 完美的作品:

Codepen:我的渲染器http://codepen.io/anon/pen/JXPWXX

注意:如果我隐藏那些其他元素opacity:0.2而不是opacity:0,则问题不会发生.但是,我无法隐藏它们,因为它们仍然可见.它们不应该是可见的.如果我添加opacity:0.01它是不可见的,并且问题不会发生在Chrome中,但仍然存在于NW中.

在NW中,当我从不透明度开始:0.2到不透明度:1时,正在处理图像解码.在Chrome浏览器中也不会发生同样的事情.

我使用以下版本:

nw.js v0.12.3
io.js v1.2.0
Chromium 41.0.2272.76
commit hash: 591068b-b48a69e-27b6800-459755a-2bdc251-1764a45

三个图像精灵分别为14.4MB,14.9MB和15.5MB.每个精灵包含75帧.

为什么会发生这种情况,我该如何预防呢？

我正在我的网站上制作一个万花筒.它所做的就是拍摄一张图像(通过拖放或加载时的默认图像)并复制10次(每个万花筒片一个).在鼠标移动时,调整切片的旋转和比例以实现期望的效果.

在谷歌浏览器和Firefox上,它可以无缝地工作,没有任何延迟.但是,在Safari上,网站无法使用,因为它太慢了.我错过了什么吗？

这是一个显示问题的JSFiddle.请注意我已经尝试用RequestAnimationFrame替换setTimeout(update,1000/60),没有任何改进.

JSFiddle:链接

$(document).ready(function () {
    //SCRIPT KALEIDOSCOPE BASE

    var DragDrop, Kaleidoscope, c, dragger, gui, i, image, kaleidoscope, len, onChange, onMouseMoved, options, ref, tr, tx, ty, update,
        bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

    Kaleidoscope = (function() {
        Kaleidoscope.prototype.HALF_PI = Math.PI / 2;

        Kaleidoscope.prototype.TWO_PI = Math.PI * 2;

        var optimal_radius = window.innerHeight;

        if (window.innerWidth > optimal_radius) {
            optimal_radius = window.innerWidth;
        }

        function Kaleidoscope(options1) {
            var key, ref, ref1, val;
            this.options = options1 != null …

我对画布有点新意,如果这是一个微不足道的问题,请原谅.

我希望能够在路径(定义为bezier路径)后设置对象的动画,但我不知道该怎么做.

我看过拉斐尔,但我无法弄清楚如何随着时间的推移走这条路.

Cake JS在演示中看起来很有前途,但我真的很难在文档中挣扎,或者在这种情况下缺乏文档.

有没有人有这方面的实例？

为了制作Photo Collage Maker,我使用具有基于对象剪辑功能的fabric js.此功能很棒但是剪切区域内的图像无法缩放,移动或旋转.我希望固定位置剪切区域和图像可以根据用户需要定位在固定剪切区域内.

我用Google搜索并找到非常接近的解决方案

var canvas = new fabric.Canvas('c');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(10,10,150,150);
ctx.rect(180,10,200,200);
ctx.closePath();
ctx.stroke();
ctx.clip();

fabric js canvas上的多个剪辑区域

其中一个剪辑区域的图像出现在另一个剪辑区域中.我怎样才能避免这种情况,或者是否有另一种使用结构js实现此目的的方法.

我需要你的帮助.我解释了我的情况:我正在使用fabric.js库在我的应用程序中放置形状,文本等.我的画布尺寸为1000x1000像素(约26.45x26.45厘米).我有一个图像上传脚本,仅用于高质量的上传图像,如300 dpi.

基本上我做的是: - 画画布(上传图片,放文字等等); - 调整画布大小乘以比例因子,以便最终得到300dpi的图像; - 以PNG格式保存画布; - 使用php/ajax和Imagick,以300 dpi的质量放置画布,以jpg格式保存.

问题是:当我保存画布时,上传图像的质量将会下降,因为我调整画布的大小是72 dpi(此时我保存在PNG中).

我认为一个可能的解决方案是:在上传图像时,将位置保存在x和y位置和大小的数组中,直到整个过程结束,替换JPG中的图像.如果这是最好的方法,可以使用Imagick库或PHP实现吗？

我想知道你对它的看法.

谢谢.

我正在使用jspdf在浏览器中创建PDF.我有多个图表有svg作为图表数据.为了向pdf添加数据,我正在使用canvas将svg转换为png,然后使用canvas.toDataURL方法将Base64 Data转换为png .在所有这些转换之后,jspdf创建的文件大小很大(大约50 MB).下面是图表数据和画布div的代码.

newdiv = document.createElement("div");
newdiv.className = "big_Con_graph big_Con_graph0";
newdiv.style.height = "0px";
newdiv.id = "big_Con_graph" + id;

下面是SVG图表加载的尺寸.

document.getElementById("big_Con_graph" + id).style.display = "block";
var big_chartReference = FusionCharts("big_myChartId"+id);
if(big_chartReference != null){
    big_chartReference.dispose();
}
var big_width = "1088";
var big_height = "604";

现在,下面是转换上面的图形SVG数据并添加到PDF的代码.

var elem_graph = $($('.big_Con_graph,big_Con_graph0')[count]).clone(true);
svgString = $(elem_graph).find("span").html();
var img = document.createElement('img');
var DOMURL = self.URL || self.webkitURL || self;
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = pdfAfterImageLoad(img,pdf,imgLoadSequence,DOMURL,totalReports,reportName);
img.src = …