小编Kai*_*ido的帖子
jQuery附加CSS文件并等待直到应用样式而没有setInterval？
我加载CSS:
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
它有效,但我有一个功能,需要在应用CSS后运行,我不想使用setInterval它.
我怎样才能做到这一点 ？
推荐指数
解决办法
查看次数
如何在canvas元素上渲染blob？
如何将图像blob渲染到canvas元素？
到目前为止,我有两个(简化的)函数来捕获图像,将其转换为blob并最终在此codepen中的画布上渲染blob ,它只返回默认的黑色图像.
var canvas = document.getElementById('canvas');
var input = document.getElementById('input');
var ctx = canvas.getContext('2d');
var photo;
function picToBlob() {
var file = input.files[0];
canvas.toBlob(function(blob) {
var newImg = document.createElement("img"),
url = URL.createObjectURL(blob);
newImg.onload = function() {
ctx.drawImage(this, 0, 0);
photo = blob;
URL.revokeObjectURL(url);
};
newImg.src = url;
}, file.type, 0.5);
canvas.renderImage(photo);
}
HTMLCanvasElement.prototype.renderImage = function(blob) {
var canvas = this;
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0)
} …推荐指数
解决办法
查看次数
ES-2015模块可以自我识别吗？
在javascript ES-2015模块中,模块成员是否可以了解其他模块成员？
例如,在CommonJS模块中,这是可能的:
function square(x) {
return x * x;
}
function whoAmI() {
return Object.keys(module.exports); // ['square','whoAmI']
}
module.exports = {
square: square,
whoAmI: whoAmI
};
在等效的ES-2015模块中,我们如何编写whoAmI()函数？
export function square(x) {
return x * x;
}
export function whoAmI() {
// ?????
}
推荐指数
解决办法
查看次数
为什么更改画布大小会重置其参数？
当我更改画布大小时，我注意到参数“mozImageSmoothingEnabled”正在被重置。
HTML
<canvas id='canv'>Your browser don't support canvas.</canvas>
Javascript
var cnv = document.getElementById('canv');
var ctx = cnv.getContext('2d');
console.log(ctx.mozImageSmoothingEnabled); // default 'true'
ctx.mozImageSmoothingEnabled = false;
console.log(ctx.mozImageSmoothingEnabled); // shows 'false'
cnv.width = 100;
console.log(ctx.mozImageSmoothingEnabled); // shows 'true'
JSFiddle：https ://jsfiddle.net/epvtuz37/
这是一个错误，还是预期的行为？
推荐指数
解决办法
查看次数
使用 foreignObject 从 svg 获取画布 dataURI 的问题
嗨，我有以下问题。
我正在生成一个 SVG 图像（https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas）。
图像生成正确，看起来不错。现在我需要获取数据 URI，但是每次我尝试从 canvas.toDataURL() 获取该信息时，都会出现此消息Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': 受污染的画布可能无法导出。(...)
我已经创建了一些示例代码来说明这种情况。
</!DOCTYPE html>
<html>
<head>
<title>SVG to PNG</title>
</head>
<body>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<em>I</em> like ' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'beer</span>' +
'</div>' +
'</foreignObject>' + …推荐指数
解决办法
查看次数
多个对象上的一个渐变
我想知道如何将一种渐变应用于多个对象。
假设我有十个彼此相邻的圆圈，并且有从黄色到红色的渐变。所有点现在应该一起显示渐变。
例子：
svg {
height: 200px;
overflow: visible;
}<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 297 345">
<defs>
<linearGradient id="Orange_Gelb" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#ffff25" />
<stop offset="100%" stop-color="#f71818" />
</linearGradient>
</defs>
<g >
<circle class="c1" cx="90" cy="100" r="50" fill="url(#Orange_Gelb)"/>
<circle class="c1" cx="90" cy="200" r="50" fill="url(#Orange_Gelb)"/>
<circle class="c1" cx="90" cy="300" r="50" fill="url(#Orange_Gelb)"/>
<circle class="c1" cx="90" cy="400" r="50" fill="url(#Orange_Gelb)"/>
<circle class="c1" cx="90" cy="500" r="50" fill="url(#Orange_Gelb)"/>
</g>
</svg>推荐指数
解决办法
查看次数
带圆角的线性渐变
我正在使用线性渐变创建背景图像。如何为每个线性渐变添加圆角。
请提供不对 html 进行任何更改的解决方案（不能使用多个 div）
.myStyle {
height:500px;
width: 900px;
background-image:
linear-gradient(lightgrey , blue),
linear-gradient(lightgrey , blue),
linear-gradient(lightgrey , blue),
linear-gradient(lightgrey , blue);
background-repeat: no-repeat;
background-size:
100px 40px,
500px 60px,
250px 50px,
250px 60px;
background-position:
0 0,
0 80px,
0 160px,
0 220px;
}<div class="myStyle"></div>推荐指数
解决办法
查看次数
是否可以使用不适用于视频的 PIP 模式？
我想将 div 类显示为 PiP（画中画）。我用谷歌搜索了很多，但只是如何在视频中启用，而不是自定义 div。
在我的环境中，可以使用js、CSS和HTML。我想使用画中画的 div 每秒都在变化。
推荐指数
解决办法
查看次数
Blob createObjectURL 下载在 Chrome 中不起作用
下面的代码在 Chrome 中显示“文件未找到”错误，但相同的代码适用于 Chrome 中的其他一些环境，并且在添加一些时间延迟后它可以正常工作。
请告知我当地环境中所需时间延迟的原因。
var a = document.createElement('a');
a.style = "display: none";
var blob = new Blob(data, {type: "application/octet-stream"});
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
推荐指数
解决办法
查看次数
设置画布文本的字体粗细
我正在尝试使用 Canvas 元素在图像上写入文本。
我已将字体粗细设置为 900，但在移动设备上它不显示。
在桌面上它很好，甚至在响应模式下测试它看起来也很好，但是当我让它上线时，较重的字体粗细并没有出现在我的手机上。
我尝试了Debug JS的注释中的代码片段，修改了一些特定的画布元素来调试它，我发现由于某种原因，它只ctx.font存储字体大小和字体名称，但不存储字体粗细。
我添加了这个词bold，它会存储它，但不会bolder存储数字值。
有谁知道这里发生了什么事吗？
我提供了一个代码片段和调试的屏幕截图，显示了它如何存储字体值。
function main() {
// Put template on canvas
ctx.drawImage(img, 0, 0, size, size);
ctx.font = "bold 110px 'Saira Condensed', sans-serif";
ctx.textAlign = "center";
ctx.fillStyle = "#ffffff";
ctx.fillText(number, 325, 290);
}
推荐指数
解决办法
查看次数