怎样将样式引入到html5,将

春容

于 2021-06-19 00:40:35 发布

阅读量122

点赞数

文章标签：怎样将样式引入到html5

将

jimgysdqdCanvashtml5js_126 样式读取到Canvas(html5，js)(Reading

jimgysdqdCanvashtml5js_126 style to Canvas (html5,js))

我有一个用户进行交互的画布，然后是最终“产品”的。标签的样式正确填充了第一个画布的数据URI。

我现在需要将此“画布”作为元素获取，然后将其转换为画布对象。例：

var canvas = parent.document.getElementById('canvas_holder');

var context = canvas.getContext("2d");

context.strokeStyle = '#f00';

//etc...

* canvas_holder *是标记，其样式设置为实际画布数据URI。我怎么去做这个思考工作？遗憾的是，我无法改变的结构。

感谢任何帮助！

I have a canvas where the user make interactions, then a for the final "product". The tag has the style properly filled with the data URI of the first canvas.

I now need to fetch this "canvas" as a element then transform it into a canvas object. Example:

var canvas = parent.document.getElementById('canvas_holder');

var context = canvas.getContext("2d");

context.strokeStyle = '#f00';

//etc...

*canvas_holder* is the tag with style set to real canvas data URI. How would I go to make this thinking work? I can not change the structure of the , unfortunately.

Appreciate any help!

原文：https://stackoverflow.com/questions/13287097

更新时间：2019-09-22 01:45

最满意答案

我认为OP想告诉我们图像是前景图像transparent.png和背景图像的组合，后者由base64编码版本表示。我看到的唯一方法是从中获取背景图像

var image = new Image();

image.src = $('#canvas_holder').css('background-image').match(/url$"?'?(.*)"?'?$/)[1];

// If you don't want to use jQuery, you could get the background-image as

// image.src = document.getElementById('canvas_holder').style.backgroundImage.match(/url$"?'?(.*)"?'?$/)[1];

并将其粘贴到画布上。

var canvas = document.getElementById('yourcanvasid');

var ctx = canvas.getContext('2d');

ctx.drawImage(image, 0, 0);

然后获取前景图像并将其粘贴到同一画布上

var foreGround = document.getElementById('canvas_holder');

ctx.drawImage(foreGround, 0, 0);

I think the OP wants to tell us that the image is a combination of a foreground image transparent.png and a background image which is represented by its base64 encoded version. The only way I see is to grab the background image from

var image = new Image();

image.src = $('#canvas_holder').css('background-image').match(/url$"?'?(.*)"?'?$/)[1];

// If you don't want to use jQuery, you could get the background-image as

// image.src = document.getElementById('canvas_holder').style.backgroundImage.match(/url$"?'?(.*)"?'?$/)[1];

and paste it onto the canvas.

var canvas = document.getElementById('yourcanvasid');

var ctx = canvas.getContext('2d');

ctx.drawImage(image, 0, 0);

and then get the foreground image and paste it onto the same canvas

var foreGround = document.getElementById('canvas_holder');

ctx.drawImage(foreGround, 0, 0);

相关问答

我认为OP想告诉我们图像是前景图像transparent.png和背景图像的组合，后者由base64编码版本表示。我看到的唯一方法是从中获取背景图像 var image = new Image();

image.src = $('#canvas_holder').css('background-image').match(/url$"?'?(.*)"?'?$/)[1];

// If you don't want to use jQuery, you could get the backgr

...

我可能不明白你说的是什么，但尝试这个链接可能对你有用 I may not understand what u said but try this link may b useful for u

Stackoverflow成员和贡献者Phrogz发布了一个非常好的库，它使用context.getImageData从图像中获取+混合像素数据，然后使用context.putImageData将混合应用于图像。他的库支持这些合成，着色和混合模式： SRC-过屏幕乘区别 SRC-在加加覆盖强光 colordodge 躲闪 colorburn 烧伤变暗暗减轻打火机排除柔光亮度颜色色调饱和 lightercolor darkercolor Phrogz的混合库可以在

...

我只是尝试了这一点，并得到了相同的结果。然后我发现我使用的是excanvas的早期版本。再次使用此版本再次运行代码，并在IE8中运行。没有在IE7上测试过，但有一些运气它会工作。史蒂夫 I just tried this on mine and had the same results. Then I found that I was using an earlier revision of excanvas. Ran the code again with this version an

...

它工作正确吗？ function printCanvas() {

var canvas = document.getElementById("canvasname");

var img = canvas.toDataURL("image/png");

var newWin = window.open("");

newWin.document.write(' '%20+%20img%20+%20' ');

newWin.print();

new

...

我有完全相同的问题，我通过在每个绘制的地方放置-0.5来解决它： context2d.fillRect( left - 0.5, top - 0.5, width, height );

这真烦人。 I had the exact same problem, I solved it by putting -0.5 everywhere I draw: context2d.fillRect( left - 0.5, top - 0.5, width, height );

It's really a

...

使用精灵的游戏，纹理多边形的3D游戏，图像编辑功能，实时裁剪和缩放，图像过滤器实时... 如果您只是使用画布来加载图像，那么绝对没有收益会有很多工作，因为您实际上必须将图像加载到img元素或Image()对象中，然后才能使用它在画布上。 Games which use sprites, 3D games with textured-polygons, Image-editing functionality, Cropping and scaling in real-time, Image

...

您可以通过指定现有画布 var renderer = new THREE.WebGLRenderer( { canvas: artifactCanvas } );

示例： http ： //jsfiddle.net/w3wna04q/1/ You can specify an existing canvas via var renderer = new THREE.WebGLRenderer( { canvas: artifactCanvas } );

Example: http://jsfi

...

在这里......我刚刚更新了kineticJs库并使用了额外的标签..由朋友浆果提供

var stage = null;

var groups = {

dog: null,

bla: null

}

function setupSta