如何使CSS背景成为Javascript Canvas? [英] How do you make a CSS background a Javascript Canvas?
问题描述
我在该主题上发现了另一个堆栈溢出帖子，其中的答案包括使用以下代码: document.getCSSCanvasContext 和WebKit与用作CSS背景的画布进行交互，但是该功能已被弃用.您还可以如何将CSS背景制作为画布?
I found another stack overflow post on this topic where the answer included using: document.getCSSCanvasContext and WebKit to interact with the canvas serving as the CSS background, but that function is depreciated. How else could you make a CSS background a canvas?
这是另一个答案中不再起作用的代码:
Here's the code from the other answer that doesn't work anymore:
<html>
<head>
<style>
div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
</style>
<script type="application/x-javascript">
function draw(w, h) {
var ctx = document.getCSSCanvasContext("2d", "squares", w, h);
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
</script>
</head>
<body onload="draw(300, 300)">
<div></div>
</body>
</html>
推荐答案
有一个名为CSS Houdini的新API，可以使您完全按照自己的意愿进行操作: pollyfill ，可以在需要时帮助扩大支持范围.
There's a new(ish) API called CSS Houdini that allows you to do exactly what you wanted: https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet. It's browser support is still super minimal (chromium only currently). There is a pollyfill that should help expand support if needed.
这是胡迪尼概述
在先前的堆栈溢出答案中也有一个答案:使用画布作为CSS背景.该答案的链接非常有用.特别是(向下两个链接) https://twitter.com/DasSurma/status/983305990731894785 ，给出了如何在不导入单独文件的情况下使API正常工作的示例.
There's also an answer with this in the previous stack overflow answers: use canvas as a css background. The links from that answer are incredibly helpful. Especially (two links down) https://twitter.com/DasSurma/status/983305990731894785, which gave an example of how to get the API to work without importing a separate file.
if ("paintWorklet" in CSS) {
const src = document.querySelector('script[language$="paint"]').innerHTML;
const blob = new Blob([src], {
type: 'text/javascript'
});
CSS.paintWorklet.addModule(URL.createObjectURL(blob));
}.squares {
background-image: paint(squares);
width: 200px;
height: 200px;
border: 2px solid black;
}
.checkboxes {
background-image: paint(checkerboard);
width: 200px;
height: 200px;
border: 2px solid black;
--checkerboard-spacing: 10;
--checkerboard-size: 32;
}<div style="display:flex;">
<div class="squares">
</div>
<div class="checkboxes">
</div>
</div>
<script language="javascript+paint">
class SquaresPainter {
paint(ctx, gemetry, properties) {
ctx.fillStyle = 'rgb(200,0,0)';
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 55, 50);
}
}
registerPaint('squares', SquaresPainter);
// checkerboard.js from https://developers.google.com/web/updates/2018/01/paintapi
class CheckerboardPainter {
// inputProperties returns a list of CSS properties that this paint function gets access to
static get inputProperties() {
return ['--checkerboard-spacing', '--checkerboard-size'];
}
paint(ctx, geom, properties) {
// Paint worklet uses CSS Typed OM to model the input values.
// As of now, they are mostly wrappers around strings,
// but will be augmented to hold more accessible data over time.
const size = parseInt(properties.get('--checkerboard-size').toString());
const spacing = parseInt(
properties.get('--checkerboard-spacing').toString()
);
const colors = ['red', 'green', 'blue'];
for (let y = 0; y < geom.height / size; y++) {
for (let x = 0; x < geom.width / size; x++) {
ctx.fillStyle = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.rect(x * (size + spacing), y * (size + spacing), size, size);
ctx.fill();
}
}
}
}
registerPaint('checkerboard', CheckerboardPainter);
</script>这篇关于如何使CSS背景成为Javascript Canvas?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
