标签: html5-canvas

他们是这样的图书馆吗？

任何浏览器都不支持AFAIK dataToURL('image/gif')

让我们说这是我的画布,上面画着一张邪恶的脸.我想用toDataURL()我的邪恶面孔作为PNG出口; 然而,整个画布都是光栅化的,包括邪恶的脸和画布边缘之间的"空白".

+---------------+
|               |
|               |
|     (.Y. )    |
|      /_       |
|     \____/    |
|               |
|               |
+---------------+

裁剪/修剪/收缩我的画布到其内容的最佳方法是什么,所以我的PNG不比脸部的'边界框'大,如下所示？最好的方法似乎是缩放画布,但假设内容是动态的......？我敢肯定应该有一个简单的解决方案,但它正在逃避我,谷歌搜索.

+------+
|(.Y. )|
| /_   |
|\____/|
+------+

谢谢!

我试图在画布上更改我的每行消息的颜色,但到目前为止没有成功.我试过为每一个创建变量,但仍然没有运气.任何帮助,将不胜感激.

function initiate(){
    var elem = document.getElementById("canvas");
    canvas = elem.getContext("2d");
    addEventListener("mousemove", animation);

    canvas.shadowColor = "rgba(0, 0, 0, 0.5)";
    canvas.shadowOffsetX = 4;
    canvas.shadowOffsetY = 4;
    canvas.shadowBlur = 5;

    canvas.font = "bold 24px verdana, sans-serif ";
    var welcomeMessage ="Welcome to the store!";
    canvas.textAlign = "start";
    canvas.textBaseline = "bottom";
    canvas.fillText(welcomeMessage, 400, 50);

    canvas.font = "bold 14px verdana, sans-serif";
    var message2 = "Your favorite store for videos games and latest DVDs!"; 
    canvas.textAlign = "start";
    canvas.textBaseline = "bottom";
    canvas.fillText(message2, 400, 100);

    canvas.font = "bold 12px …

我必须在路径上移动小矩形.在画布内单击后,矩形会移动.

我无法为它设置动画,因为对象只是跳到所需的点.

请在小提琴上找到代码.

HTML

<canvas id="myCanvas" width=578 height=200></canvas>

CSS

#myCanvas {
    width:578px;
    height:200px;
    border:2px thin;
}

JavaScript的

var myRectangle = {
    x: 100,
    y: 20,
    width: 25,
    height: 10,
    borderWidth: 1
};

$(document).ready(function () {
    $('#myCanvas').css("border", "2px solid black");
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var cntxt = canvas.getContext('2d');
    drawPath(context);
    drawRect(myRectangle, cntxt);

    $('#myCanvas').click(function () {
        function animate(myRectangle, canvas, cntxt, startTime) {
            var time = (new Date()).getTime() - startTime;
            var linearSpeed = 10;
            var newX = Math.round(Math.sqrt((100 …

我们正在开发一个可视化Web应用程序,它使用d3-force在画布上绘制网络.由于每个节点都包含大量信息,并且由于CPU占用大量资源来重绘每个帧的所有内容,因此我们实现了一种缓存,其中每个节点都在其画布上绘制(未链接到DOM),每个缩放级别一次.然后在节点的位置在主画布(链接到DOM)上绘制那些画布.

我们对速度增益感到满意,即使结果现在是内存密集型(特别是在hidpi显示器(视网膜)上,像素密度可以是2或3).

但现在我们在iOS上遇到了浏览器的问题,在与界面进行少量交互后,进程崩溃了.回想一下,这对于旧版本(iOS12之前)来说不是问题,但是我没有任何未更新的设备来确认这一点.

我认为这段代码总结了这个问题:

const { range } = require('d3-array')

// create a 1MB image
const createImage = () => {
    const size = 512

    const canvas = document.createElement('canvas')
    canvas.height = size
    canvas.width = size

    const ctx = canvas.getContext('2d')
    ctx.strokeRect(0, 0, size, size)
    return canvas
}

const createImages = i => {
    // create i * 1MB images
    let ctxs = range(i).map(() => {
        return createImage()
    })
    console.log(`done for ${ctxs.length} MB`)
    ctxs = null
}

window.cis = createImages …

我一直在编写一个图像处理程序,它通过HTML5画布像素处理来应用效果.我已经实现了Thresholding,Vintaging和ColorGradient像素操作,但令人难以置信的是我无法改变图像的对比度!我已经尝试了多种解决方案但是我总是在图片中获得太多的亮度并且对比效果较少而且我不打算使用任何Javascript库,因为我试图在本地实现这些效果.

基本像素操作代码:

var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
 //Note: data[i], data[i+1], data[i+2] represent RGB respectively
data[i] = data[i];
data[i+1] = data[i+1];
data[i+2] = data[i+2];
}

像素操作示例

值处于RGB模式,这意味着data [i]是红色.所以如果data [i] = data [i]*2; 对于该像素的红色通道,亮度将增加到两倍.例:

var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
 //Note: data[i], data[i+1], data[i+2] represent RGB respectively
 //Increases brightness of RGB channel by 2
data[i] = data[i]*2;
data[i+1] = data[i+1]*2; …

我有的是这个:

我想要的是旋转红色矩形,例如20度,但这是我最终得到的:

如您所见,矩形完美旋转,但它已移动并且不再与黑色物体匹配.

我的代码是:

context.save();
context.rotate(angle * Math.PI / 180); // in the screenshot I used angle = 20
context.translate(angle * 4, 2);
context.fillStyle = "red";
context.fillRect(x + 14, y - 16, 5, 16);
context.restore();

我想让矩形转动而不移动它的位置.

谢谢.

我一直在写一个小的javascript插件,我在改进画布的渲染整体质量方面遇到了一些麻烦.我在这里和那里搜索过网络,但找不到任何有意义的东西.

从我的曲线创建的线条不平滑,如果你看下面的jsfiddle,你就会理解我的意思.它有点像素化.有没有办法提高质量？或者是否有一个Canvas框架已经使用某种方法来自动提高我在项目中可以使用的质量？

我的画布渲染

不确定这是否有帮助,但我在脚本开头使用此代码:

var c = document.getElementsByClassName("canvas");

  for (i = 0; i < c.length; i++) {
    var canvas = c[i];
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0, canvas.width, canvas.height);
    ctx.lineWidth=1;
  }

}

提前致谢

我的曲线代码示例:

var data = {
diameter: 250,
slant: 20,
height: 290
};

for (i = 0; i < c.length; i++) {
  var canvas = c[i];
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
    ctx.moveTo( 150 + ((data.diameter / 2) + data.slant ), (data.height - 3) );
    ctx.quadraticCurveTo( 150 , (data.height - …

我一直在寻找一个可以帮助嵌入在画布区域中的UI小部件的渲染和功能的库,例如组合框,复选框,单选按钮,文本区域,带滚动条的列表框等,而不会叠加普通的HTML将它们浮动在画布区域的顶部.Flex为Flash提供了所有这些功能,并且有许多Actionscript库可以在Flash"画布"中创建UI小部件组件(可以这么说).这些UI小部件库在某些情况下很好地服务于Flash社区,在HTML5画布中的类似情况下也需要这样做.

有谁知道这些库可以在哪里找到？

编辑:

对于任何好奇的人,这是完成的结果.

http://jsfiddle.net/Javalsu/vxP5q/743/embedded/result/

我正在构建我在此链接中找到的代码

http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect

我想让这更像是雪花效果而不是雪效果,我需要让每个元素都有不同的颜色.但似乎一次为整个画布设置填充颜色.

有没有办法为每个元素指定不同的填充颜色,或者我是以完全错误的方式进行此操作？

谢谢

更新:如果有人需要五彩纸屑,这是成品

http://jsfiddle.net/mj3SM/6/

window.onload = function () {
//canvas init
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

//snowflake particles
var mp = 200; //max particles
var particles = [];
for (var i = 0; i < mp; i++) {
    particles.push({
        x: Math.random() * W, //x-coordinate
        y: Math.random() * H, //y-coordinate
        r: Math.random() * 15 + 1, …